防抖是将多次连续触发变为最后一次执行，用于降低高频事件（如输入、缩放）的执行频率；核心是清除旧定时器并设置新定时器，需注意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)，内部管理依赖和清理
