防抖和节流

最新推荐文章于 2025-04-02 11:15:13 发布

原创最新推荐文章于 2025-04-02 11:15:13 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#防抖 #节流

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨了防抖(debounce)与节流(throttle)技术，这两种技术常用于处理高频触发事件，如用户滚动页面或输入搜索框。防抖确保在最后一次触发事件后的指定延迟后才执行操作，而节流则确保处理函数至少在规定的时间间隔内执行一次。通过具体实例和代码实现，本文详细解释了这两种技术的工作原理和应用场景。

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

防抖（debounce）和节流（throttle）是针对响应跟不上触发频率这类问题的两种解决方案。

防抖（debounce）

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作（用于搜索输入）

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log('Number of calls: %d', flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener('scroll', debounce(foo, 2000));

节流（throttle）

比防抖稍宽松，不管事件触发多频繁，会保证在规定时间内执行一次处理函数。
有两种方式：
（1）时间戳实现

function throttle(func, delay){//时间戳实现
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

（2）定时器实现

fucntion throttle(func, delay){//定时器实现
  let timer = null;
  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}