17370845950

防抖是将连续多次触发压缩为最后一次触发后的延迟执行，解决高频操作导致的性能问题；核心是每次触发重置定时器，停止触发超时后才执行函数。

防抖是什么？它解决什么问题

防抖（debounce）不是节流，也不是简单的延时执行——它是把「连续多次触发」压缩成「最后一次触发后的延迟执行」。典型场景是用户在 input 框中快速打字、resize 窗口、scroll 滚动时发起搜索或重绘，若不控制，可能一秒触发几十次函数，造成卡顿或多余请求。

核心逻辑：每次触发都重置定时器；只有停止触发超过指定时间后，才真正执行目标函数。

手写一个可靠防抖函数的要点

不能只用 setTimeout + clearTimeout 就完事。常见坑包括：this 指向丢失、参数无法透传、返回值被忽略、未提供取消能力。

• 必须用 func.apply(context, args) 保留原始调用上下文和参数
• 返回一个可取消的函数，暴露 cancel 方法（比如用户中途离开页面要清资源）
• 支持立即执行模式（leading edge），即首次触发立刻执行，后续触发仍按防抖规则处理（需额外布尔参数）
• 避免闭包内变量污染：每次调用防抖函数应生成独立的定时器引用

function debounce(func, wait, immediate = false) {
  let timeout = null;
  return function(...args) {
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(this, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(this, args);
  };
}

// 使用示例
const handleInput = debounce((e) => {
  console.log('搜索:', e.target.value);
}, 300);

input.addEventListener('input', handleInput);

防抖 vs 节流：什么时候该选哪个

防抖适合「等用户停下来再响应」的场景，比如搜索建议、表单校验、窗口尺寸适配；节流（throttle）适合「保证固定频率执行」的场景，比如拖拽位置上报、Canvas 绘图帧率控制。

• 防抖：高频触发 → 全部忽略，只响应最后一次停顿后的行为
• 节流：高频触发 → 每隔 wait 毫秒最多执行一次，不管中间触发多少次
• 误用防抖处理滚动监听可能导致视觉反馈延迟明显；误用节流处理搜索输入会导致用户还没输完就发了请求
• 现代框架（如 React）中，防抖常配合 useCallback + 依赖数组使用，避免每次渲染都新建防抖函数

实际项目中容易被忽略的细节

防抖不是加个包装函数就万事大吉。真实环境里几个关键点常被跳过：

• 事件监听器没移除 → 防抖函数内部的 timeout 可能成为内存泄漏源，尤其在组件卸载时需手动 cancel()
• 服务端接口有防重机制，但前端防抖没对齐超时时间，导致用户快速连点两次，第二次请求仍被发出（比如防抖设了 500ms，但按钮点击间隔 400ms）
• 移动端 input 在某些 Android 浏览器中会延迟触发，单纯防抖可能漏掉首次输入，需结合 compositionstart/compositionend 处理中文输入法
• 防抖时间不能硬编码：网络较慢时可设为 600ms，本地开发可设为 200ms，最好抽成配置项或根据响应时间动态调整

最麻烦的不是写不对，而是忘了它只管「执行时机」，不管「执行结果」——比如防抖后的请求失败了，得靠单独的错误重试逻辑兜底，这和防抖本身无关。