防抖与节流

最新推荐文章于 2025-05-28 19:34:53 发布

一颗帅白菜

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量45

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_52656116/article/details/130091787

版权

文章介绍了JavaScript中两种重要的性能优化技术——防抖(debounce)和节流(throttle)。防抖技术确保在一系列连续操作后只执行一次函数，常用于窗口resize事件或长按事件处理。节流技术则保证在设定的时间间隔内只执行一次函数，适用于频繁触发的事件如滚动事件。两者都利用setTimeout来控制函数的执行，以提升应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、防抖是什么？

防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

1.1、使用步骤

代码如下（示例）：

function debounce(fn,delay){
     // 记录上一次的延时器
     var timer = null;
     return function(){
         // 清除上一延时器
         clearTimeout(timer)
         // 重新设置新的延时器
         timer = setTimeout(function(){
                 fn.apply(this)
         },delay)
     }
 }
 document.getElementById('btn').onclick = debounce(function(){
     console.log('点击事件被触发了'+Date.now());
 },2000)

2、节流是什么？

函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。
函数节流限制一个函数在一定时间内只能执行一次。

2.1、使用步骤

代码如下（示例）：

let timer = null;
function throttle (fun,wait) {
  return function () {
  	const argu = arguments;
    // 事件触发，如果之前有等待的事件，则不作处理
    if (timer) {
    } else {
      事件触发，前面没有事件在等待，则将事件进行等待执行
      timer = setTimeout(function () {
        fun();
      }, wait);
    }
  }
}

// 调用
throttle(fun, 100)(argu1, argu2);

总结

1.函数防抖debounce，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。
2.函数节流throttle，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
3.函数防抖debounce关注一定时间连续触发，只在最后执行一次，而函数节流throttle侧重于一段时间内只执行一次。