17370845950

防抖是事件连续触发时只执行最后一次，节流是固定间隔内最多执行一次；前者适用于搜索输入、resize等需“停止后响应”的场景，后者适用于scroll、拖拽等需“匀速响应”的场景。

防抖和节流是优化高频事件（如 resize、scroll、input、click）处理函数的核心手段，本质是控制函数执行频率：防抖让函数在连续触发后只执行最后一次，节流则保证函数按固定间隔至少执行一次。

防抖（Debounce）：等“停”了再执行

适用场景：用户输入搜索建议、窗口大小调整后重新布局。核心思路是每次触发时清除上一个定时器，重设新定时器。

简单实现：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

使用示例：

const handleInput = debounce(() => {
  console.log('发起搜索请求');
}, 300);

inputElement.addEventListener('input', handleInput);

• 用户快速输入10个字符，只会在最后停顿300ms后执行一次
• 注意：闭包中保存的 timer 必须可被清除，否则会累积定时器
• 如需立即执行首次调用（leading edge），需额外加标志位逻辑

节流（Throttle）：固定节奏执行

适用场景：滚动监听加载更多、鼠标拖拽实时反馈。目标是限制单位时间内最多执行一次。

两种常见实现方式：

• 定时器版（推荐）：触发时若无活跃定时器，则执行并启动延时器；延时期间触发不执行，但可记录最新参数，延时结束后执行最后一次
• 时间戳版：记录上次执行时间，每次触发时比较当前时间与上次执行时间差，大于间隔才执行并更新时间戳

定时器版节流示例：

function throttle(fn, delay) {
  let timer = null;
  let lastArgs = null;
  return function(...args) {
    lastArgs = args;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, lastArgs);
        timer = null;
        lastArgs = null;
      }, delay);
    }
  };
}

该版本兼顾响应性与平滑性，适合大多数滚动/拖拽场景。

实际应用中的关键细节

• this 和参数传递：用 fn.apply(this, args) 或箭头函数 + 展开运算符确保上下文和参数正确
• 及时清理：组件卸载或事件解绑前，应清除残留定时器（如 React 中在 useEffect 清理函数里 clearTimeout）
• 区分业务语义：搜索建议用防抖，滚动到底部加载用节流；误用会导致体验卡顿或响应延迟

• 避免嵌套包装：不要对已防抖/节流的函数重复包装，易引发逻辑混乱

现代开发中的简化方案

如果项目使用 Lodash，可直接调用 _.debounce 和 _.throttle，它们已处理好 this 绑定、取消、立即执行等边界情况。

Vue 3 的 v-on:scroll.throttle 或 @input.debounce.300（需配合插件）也提供了模板级语法糖，但底层仍是类似逻辑。

不复杂但容易忽略的是：别只写防抖节流，要结合业务判断是否真需要——比如点击按钮提交表单，用防抖反而会让用户困惑；而一个每秒触发20次的 mousemove，不用节流就可能拖慢页面。