17370845950

防抖是将多次连续触发变为最后一次执行，用于降低高频事件（如输入、缩放）的执行频率；核心是清除旧定时器并设置新定时器，需注意this绑定、定时器清理及移动端兼容性。

防抖是啥？为什么高频事件需要它

防抖（debounce）不是“防止抖动”，而是把多次连续触发变成最后一次执行。比如用户在 input 框里快速打字，你每敲一个键就发一次请求，服务器压力大、响应卡顿、还可能拿到中间态脏数据——防抖就是让系统等用户“停下来”再干活。

典型场景：搜索框输入、窗口缩放 resize、表单校验、按钮重复点击拦截。

手写一个靠谱的 debounce 函数

核心逻辑就三步：清旧定时器、设新定时器、返回函数。注意闭包保存 timerId，且必须用 clearTimeout 主动清除，否则上一次的延迟任务会在下一次触发后“突然执行”。

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

• fn 必须是可执行函数，不能是字符串或未定义
• delay 建议设为 300（毫秒），太短起不到节流效果，太长（如 1000）会让交互显得迟钝
• 返回的函数会丢失原始 this，所以要用 apply 或 call 显式绑定
• 如果要支持立即执行（首次触发立刻运行，后续连续触发只重置定时器），得加个 immediate 参数，但多数搜索场景不需要

实际绑定事件时容易踩的坑

直接写 input.addEventListener('input', debounce(handleSearch, 300)) 看似没问题，但每次调用 debounce 都会生成新函数，导致无法移除监听器；更隐蔽的问题是，若组件销毁没清理定时器，setTimeout 仍会偷偷执行，引发 Cannot read property 'xxx' of null 报错。

• 务必把防抖函数提成变量：const debouncedSearch = debounce(handleSearch, 300)，再传给 addEventListener
• 在组件卸载或页面离开前，调用 clearTimeout 清掉残留定时器（如果暴露了 timerId）或使用 AbortController 配合 cleanup
• 不要在 debounce 内部做异步等待（比如 await），它本身不处理 Promise，要等异步完成再执行下一次，得用 throttle 或自定义队列逻辑
• 移动端 input 事件兼容性较好，但 iOS Safari 对 compositionstart/compositionend 的处理可能导致中文输入时漏触发，需额外监听组合事件

用 Lodash 的 debounce 要注意什么

虽然方便，但默认行为和手写版有关键差异：Lodash 版本会自动绑定 this 和参数，并提供 leading/trailing 控制首尾执行，还支持 maxWait 强制兜底执行。但体积大（约 2KB gzip 后），纯前端小项目没必要引入整包。

• 只取方法：import { debounce } from 'lodash-es'，避免打包进整个 Lodash
• leading: true 适合按钮防重复点击（点下去立刻禁用按钮），trailing: true（默认）适合搜索（等用户停手再查）
• 别忘了在组件销毁时调用 debouncedFn.cancel()，否则定时器照常运行
• 如果项目已用 React，useCallback + 自定义 Hook 封装更轻量，比如 useDebounce(callback, delay)，内部管理依赖和清理

防抖看着简单，真正落地时最麻烦的是定时器生命周期管理——不是写对函数就行，得盯住它什么时候启、什么时候停、停没停干净。