JavaScript — 防抖与节流

原创已于 2025-01-16 16:16:26 修改 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

于 2021-07-14 22:14:25 首次发布

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了前端开发中常用的两种优化技术：防抖（Debounce）和节流（Throttle），通过实例展示了如何在输入框事件中应用这些技术，减少频繁操作导致的冗余响应。

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

防抖

这个函数接受两个参数：要执行的函数 func 和延迟时间 delay，并返回一个新函数。新函数在被连续调用的一段时间内只会执行一次，直到调用停止超过 delay 毫秒。

在新函数内部，使用 clearTimeout 清除上一个（如果有的话） setTimeout 计时器，并创建一个新的 setTimeout 计时器，以在延迟时间 delay 后执行 func。由于新函数没法访问 timer 变量，因此使用了闭包来捕获和存储计时器 ID。

这个防抖函数通常用于延迟用户输入事件的响应，以避免不必要的重复 API 请求或计算。

function debounce(fn, delay) {
  let timer;
  return function (e) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(e);
    }, delay);
  };
}

节流

这个函数接受两个参数：要执行的函数 func 和延迟时间 delay，并返回一个新函数。新函数在被连续调用的一段时间内最多只会执行一次，直到延迟时间 delay 过去。

在新函数内部，使用一个变量 timer 标记当前是否已经设置了定时器。如果 timer 为 null，则说明可以执行 func。在执行完 func 后，将 timer 重设为 null。否则，如果 timer 不为 null，则说明上一个定时器还未触发，不需要再设置新的定时器。这就实现了节流作用。

这个节流函数通常用于减少响应频率较高的事件的触发次数，例如浏览器的 resize 和 scroll 事件。

function control(fn, delay) {
  let timer;
  return function (e) {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn(e);
      timer = null;
    }, delay);
  };
}