17370845950

防抖是让函数在最后一次触发后延迟执行，而非简单延后；用于搜索框可避免频繁请求，核心是每次触发前清除上一轮定时器；不适用于需实时响应的场景，实现时需注意定时器变量声明、引用保存及业务时机判断。

防抖（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，否则外部误清会导致防抖失效

常见踩坑点有哪些？

看似几行代码，实际线上容易出问题：

• 忘记清除定时器 → 多次绑定导致多个 setTimeout 并行，最后只执行最后一次，但中间可能已触发多次
• 没用 let/const 声明 timeoutId → 变量提升或作用域污染，尤其在循环中反复创建防抖函数时
• 把防抖函数赋值给事件监听器却没保存引用 → 每次重新绑定都是新函数，clearTimeout 清的是上一个函数里的旧 timeoutId，实际无效
• 在 React 中直接在 render 里调用 debounce → 每次渲染都生成新函数，破坏 useCallback 缓存，也可能导致监听器重复绑定

防抖真正的难点不在实现，而在判断「该不该防」以及「防多久合适」——比如搜索建议设 300ms，地图缩放可能得设到 100ms，而表单校验甚至要结合 blur 事件一起兜底。