防抖与节流原理及应用详解

防抖与节流并非简单的性能优化“开关”，而是深度绑定业务意图的交互设计决策：用户操作停止后才响应（如搜索联想）选防抖，需即时反馈但须限频（如滚动监听、拖拽）则选节流；二者在真实项目中远不止几行代码——必须妥善处理this绑定、参数透传、立即执行、定时器清理（尤其Vue/React卸载时防内存泄漏与报错），更关键的是，它们只是起点，还需同步loading状态、实时DOM值（如scrollTop）等上下文逻辑，否则再“靠谱”的函数也会导致体验断裂或功能失效。

防抖和节流不是“要不要用”的选择题，而是“哪个更贴合业务意图”的判断题：用户操作停了才响应，选 debounce；需要过程反馈但又不能太密，选 throttle。

怎么写一个靠谱的 debounce 函数？

核心就一条：每次触发都清掉上一个 setTimeout，只留最后一次的延时执行。但真实项目里光这样不够：

• 没处理 this 和参数，回调里 this 会变成 window 或 undefined（尤其在事件监听中）
• 没加 immediate 选项，按钮防重复点击时第一次必须立刻禁用，不能等 300ms 后才生效
• 函数返回后没保存引用，比如在 React 的 useEffect 里每次渲染都重生成，等于白写

推荐基础版（带立即执行）：

function debounce(func, delay, immediate = false) {
  let timer = null;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    if (immediate && !timer) {
      func.apply(context, args);
    }
    timer = setTimeout(() => {
      if (!immediate) func.apply(context, args);
      timer = null;
    }, delay);
  };
}

为什么 throttle 用时间戳版比定时器版更常用？

因为滚动、拖拽这类场景对“首次响应延迟”很敏感——用户一动鼠标就该有反馈，而不是卡顿 100ms 才动一下。时间戳版天然支持首次立即执行：

• 记录上次执行的 lastTime，每次触发用 Date.now() 对比间隔
• 缺点是：如果用户在间隔末尾疯狂触发，最后一次可能被漏掉（比如 99ms 内触发 10 次，第 10 次刚好卡在 now - lastTime ）
• 进阶解法是“时间戳 + 尾部定时器”双保险，但多数场景用纯时间戳版已足够

简单可用的时间戳版：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

Vue/React 里直接套 debounce 会出什么问题？

不是函数写得不对，而是生命周期没管好：

• 组件卸载了，setTimeout 还在跑 → this 变成 null，报 “Cannot read property ‘xxx’ of null”
• 在 Vue 3 的 setup 或 React 的 useEffect 里没做清理，定时器持续占用内存
• 把 debounce(fn, 300) 写在模板绑定里（如 @input="debounce(...)"），每次 render 都新建函数 → 防抖失效

正确姿势：

• Vue 3：onBeforeUnmount 里手动 clearTimeout（需提前用 ref 存住 timer）
• React：封装成 useDebounceCallback 自定义 Hook，内部用 useEffect 清理
• 优先用 lodash-es 的 debounce，它返回的函数自带 cancel 方法，清理更可控

最常被忽略的一点：防抖节流不是性能“银弹”，它只是把问题从「调用太密」转成「逻辑是否仍正确」——比如搜索框防抖后没做 loading 状态同步，用户会以为卡了；滚动节流后没更新 scrollTop 值，加载更多就永远不触发。效果好不好，不在函数本身，而在你有没有补全上下文逻辑。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《防抖与节流原理及应用详解》文章吧，也可关注golang学习网公众号了解相关技术文章。