360未经证实的网站如何做,网络营销方式有哪些各方式的优缺点有哪些,想做苗木生意网站怎么怎么做,有保障的无锡网站制作#x1f4e3;读完这篇文章里你能收获到
理解防抖#xff08;Debouncing#xff09;和节流#xff08;Throttling#xff09;的概念#xff1a;了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件掌握防抖与节流的实现方法#xff1a;学习如何在JavaScript中… 读完这篇文章里你能收获到
理解防抖Debouncing和节流Throttling的概念了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件掌握防抖与节流的实现方法学习如何在JavaScript中实现防抖和节流函数并理解其工作原理应用防抖与节流技术了解在实际开发中何时以及如何使用防抖和节流来优化用户交互和提升页面性能 文章目录 一、防抖Debouncing1. 防抖的概念2. 防抖的使用场景3. 防抖的实现 二、节流Throttling1. 节流的概念2. 节流的使用场景3. 节流的实现 三、如何选择防抖或节流 一、防抖Debouncing
1. 防抖的概念
防抖是一种优化技术用于减少短时间内连续触发同一事件时的处理次数。当一个事件被频繁触发时防抖函数会忽略后续的触发直到一段时间内没有新的触发发生再执行一次事件处理器。
2. 防抖的使用场景
防抖常用于以下场景
输入框实时搜索或自动完成当用户在输入框中快速输入时防抖可以确保在用户停止输入一段时间后再发起请求避免频繁请求服务器。地图拖拽或其他持续性用户交互在地图拖拽等持续性用户交互中防抖可以减少不必要的计算和渲染提高性能。
3. 防抖的实现
以下是一个简单的防抖功能实现 在这个实现中创建了一个返回新函数的debounce函数。新函数内部清除已有的定时器并设置一个新的定时器在指定的延迟时间后执行原函数。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDebounce Example/title/headbodyinput typetext idsearchInput placeholderSearch...script// 防抖函数实现function debounce(func, delay) {let timeoutId; // 定时器ID用于清除定时器return function() {clearTimeout(timeoutId); // 清除已有的定时器const context this;const args arguments;// 设置一个新的定时器在指定的延迟时间后执行原函数timeoutId setTimeout(function() {func.apply(context, args);}, delay);};}// 获取输入框元素let searchInput document.getElementById(searchInput);// 使用防抖处理输入框的keyup事件searchInput.addEventListener(keyup, debounce(function() {console.log(Search input changed, debounced.);}, 300)); // 延迟时间为300毫秒/script/body
/html二、节流Throttling
1. 节流的概念
节流是一种优化技术用于限制在同一时间段内事件处理器的执行次数。即使事件被频繁触发节流函数也会确保事件处理器在每个时间段内只执行一次。
2. 节流的使用场景
节流常用于以下场景
窗口大小改变时的布局调整当用户快速调整窗口大小时节流可以确保在每个时间段内只执行一次布局调整操作避免过度渲染。滚动事件的处理滚动事件可能会非常频繁地触发节流可以限制滚动事件处理器的执行频率提高性能。
3. 节流的实现
以下是一个简单的节流功能实现 在这个实现中创建了一个返回新函数的throttle函数。新函数内部检查当前时间与上一次执行时间的差值是否大于指定的延迟时间如果是则执行原函数并更新上一次执行时间。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleThrottle Example/titlestyle.container {width: 100%;height: 100vh;background-color: lightblue;}/style/headbodydiv classcontainer/divscript// 节流函数实现function throttle(func, delay) {let lastExecution 0; // 记录上一次执行的时间return function() {const currentTime Date.now(); // 获取当前时间if (currentTime - lastExecution delay) { // 如果距离上一次执行的时间大于延迟时间func.apply(this, arguments); // 执行原函数lastExecution currentTime; // 更新上一次执行的时间}};}// 获取容器元素let container document.querySelector(.container);// 使用节流处理窗口大小改变事件window.addEventListener(resize, throttle(function() {console.log(Window resized, throttled.);}, 200)); // 延迟时间为200毫秒/script/body
/html三、如何选择防抖或节流
在实际开发中选择防抖还是节流取决于具体的需求
如果需要在用户停止操作一段时间后再执行事件处理器例如搜索框输入完成后才发起请求应选择防抖。如果需要在每个时间段内至少执行一次事件处理器但限制执行频率例如滚动事件的处理应选择节流。
