javascript防抖是什么_如何防止函数被频繁调用【教程】

狼影 2026-01-21 00:00:00 次阅读

防抖是让函数在连续触发中只执行最后一次，适用于搜索框输入等场景；核心是清除前次定时器并重设新定时器，需注意this绑定、闭包隔离及引用一致性。

防抖（debounce）不是“阻止函数执行”，而是让函数在连续触发中只执行最后一次——适用于搜索框输入、窗口缩放等场景，核心是“等停了再干”。

debounce 函数怎么写才靠谱

手写一个基础但可用的 debounce，关键在于每次调用时清除上一次的定时器，并重设新定时器：

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

注意点：

fn.apply(this, args) 保证原函数的 this 和参数正确传递，不能直接写 fn(...args)（会丢失上下文）
必须把 timer 声明在闭包内，否则多个 debounce 实例会互相覆盖
如果需要立即执行首次调用（leading edge），得额外加标志位和逻辑，基础版默认只支持 trailing（末次执行）

为什么用 lodash.debounce 却还是没生效

常见失效原因不是函数写错，而是引用没对齐：

没把 debounced 函数“存起来”反复使用——比如每次渲染都重新 debounce(handleInput, 300)，等于每次都新建一个闭包，旧定时器还在跑，新函数完全无关
在 React 中直接写 onChange={debounce(fn, 300)}，每次 render 都生成新函数，导致事件绑定失效或内存泄漏
没处理 cancel()：比如组件卸载前应调用 debounced 函数的 cancel 方法（lodash 提供），否则定时器仍在后台执行，可能引发 setState 报错