防抖是让函数在最后一次触发后延迟执行，而非简单延后；用于搜索框可避免频繁请求，核心是每次触发前清除上一轮定时器；不适用于需实时响应的场景，实现时需注意定时器变量声明、引用保存及业务时机判断。
防抖（debounce）不是让函数“慢一点执行”，而是让它“等一等再执行”——只要触发还在继续，就不断重置计时器，直到最后一次触发后过了指定时间才真正调用。
为什么输入搜索框要防抖？
用户每按一个键都发请求，既浪费资源又可能打乱后端排序逻辑；防抖能确保只在用户停手后才查一次。关键在于：clearTimeout 必须在每次新触发时及时清除上一轮定时器。
- 典型场景：搜索框输入、窗口
resize、按钮重复点击拦截 - 不适用场景：需要实时响应的操作（如游戏按键、滚动监听位置）
- 注意：防抖会丢失中间状态，如果业务依赖“每一次输入”，就得换节流（throttle）或加缓存
最简可用的防抖函数怎么写？
核心三要素：定时器变量、清除逻辑、执行延迟。下面这个版本支持立即执行选项，也兼容多数现代浏览器：
function debounce(func, wait, immediate = false) {
let timeoutId = null;
return function(...args) {
const later = () => {
timeoutId = null;
if (!immediate) func(...args);
};
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(later, wait);
if (callNow) func(...args);
};
}
-
immediate = false：默认行为，等停顿后再执行 -
immediate = true：首次触发立刻执行，后续触发仍需等待 -
...args和func(...args)保证参数透传，避免丢失事件对象或自定义参数 - 不要直接在闭包外暴露
timeoutId，否则外部误清会导致防抖失效
常见踩坑点有哪些？
看似几行代码，实际线上容易出问题：
立即学习“Java免费学习笔记（深入）”；
- 忘记清除定时器 → 多次绑定导致多个
setTimeout并行，最后只执行最后一次，但中间可能已触发多次 - 没用
let/const声明timeoutId→ 变量提升或作用域污染，尤其在循环中反复创建防抖函数时 - 把防抖函数赋值给事件监听器却没保存引用 → 每次重新绑定都是新函数，
clearTimeout清的是上一个函数里的旧timeoutId，实际无效 - 在 React 中直接在 render 里调用
debounce→ 每次渲染都生成新函数，破坏useCallback缓存，也可能导致监听器重复绑定
防抖真正的难点不在实现，而在判断「该不该防」以及「防多久合适」——比如搜索建议设 300ms，地图缩放可能得设到 100ms，而表单校验甚至要结合 blur 事件一起兜底。
