防抖是什么？如何实现防抖函数【教程】

防抖是一种应对高频操作的优化策略，核心在于“等用户彻底停手后再执行一次”，通过每次触发时清除旧定时器并重新设置延迟来实现，它不是简单减少执行次数，而是精准解决搜索输入、窗口缩放等场景下的资源浪费与逻辑混乱问题；文章不仅详解了带this绑定和参数透传的基础实现，还拓展了首次立即执行的增强模式，并重点提醒了React/Vue中缓存防抖函数、避免重复创建等实战陷阱——真正考验开发者的，从来不是那几行代码，而是对交互意图的准确判断：这次操作，究竟该立刻响应，还是耐心等待。

防抖不是“让函数少执行几次”，而是“等用户彻底停手了再执行一次”——它解决的是高频触发场景下资源浪费和逻辑错乱的问题，比如搜索框输入、窗口缩放、按钮连点。

防抖的核心逻辑：每次触发都重置倒计时

关键在于用 setTimeout 延迟执行，并在下一次触发前用 clearTimeout 清掉旧的定时器。只要触发没停，定时器就永远等不到执行那一刻。

• 必须保存上一个 timeoutId 的引用，否则无法清除
• 延迟时间（如 300ms）不是固定值，要根据场景调：输入搜索通常 200–500ms，窗口 resize 可设 100ms
• 函数执行时机取决于“最后一次触发之后是否过了等待时间”，和触发总次数无关

基础实现：带 this 和参数传递的防抖函数

原生 setTimeout 会丢失 this 和参数，所以要用 apply 或箭头函数绑定上下文，并把参数透传过去。

function debounce(func, wait) {
  let timeoutId = null;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

• 使用 ...args 和 func.apply(this, args) 确保被包装函数能拿到正确的 this 和所有参数
• 不能直接写 setTimeout(func, wait, ...args)，因为这样会丢失 this
• 如果 func 是箭头函数，this 绑定无效，但多数业务函数是普通函数，需保留兼容性

加个 immediate 参数：首次立即执行，后续仍防抖

有些场景（如滚动到底部加载）希望第一次动作立刻响应，之后再进入防抖节奏。这时需要区分两种模式：

• immediate === true：首次调用立即执行，后续触发在 wait 时间内不执行，wait 结束后才恢复可执行状态
• 实现上需用一个标志位记录是否已执行，且只在 timeoutId === null 时才允许立即执行
• 注意：这种模式下，clearTimeout 依然必要，否则连续触发会导致多次立即执行

实际使用中容易忽略的坑

防抖函数本身返回的是新函数，每次调用 debounce(fn, 300) 都会产生一个独立闭包，所以不能在组件重复渲染中反复创建，否则防抖失效。

• React 中应在 useCallback 里定义并缓存防抖函数，或在模块顶层/类属性中初始化
• Vue 3 的 setup 中同理，避免在 render 或响应式回调里重新生成
• 不要对防抖函数做 === 比较判断，它的引用每次都不一样
• 如果函数内部有异步操作（如 fetch），防抖只控制发起时机，不控制请求并发或取消——那是 AbortController 的事

真正难的不是写对那几行代码，而是想清楚「这次操作到底该立刻响应，还是该攒一攒」；防抖的边界感，比实现细节更常出问题。

终于介绍完啦！小伙伴们，这篇关于《防抖是什么？如何实现防抖函数【教程】》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！