什么是javascript的防抖与节流【教程】_网络技术

防抖和节流需按业务意图选择：停操作后响应用 debounce，需过程反馈但限频用 throttle；debounce 要处理 this、参数、immediate 及清理定时器；throttle 时间戳版因首次立即执行更适用于滚动拖拽；Vue/React 中须在卸载时清理定时器，否则报错或内存泄漏；防抖节流非银弹，需同步 loading、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 值，加载更多就永远不触发。效果好不好，不在函数本身，而在你有没有补全上下文逻辑。

# vue # react # javascript # java # app # win # 为什么 # NULL # 封装 # date # Property # undefined # 事件 # this # input # 防抖 # 首次 # 没做 # 拖拽 # 进阶 # 还在 # 鼠标 # 而在 # 适用于 # 这类

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

什么是javascript的防抖与节流【教程】

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

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

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

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

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

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