防抖是什么？如何实现函数防抖？

防抖（debounce）是一种控制函数执行频率的核心技术，它让连续触发的函数只在最后一次调用后延迟执行，完美适配搜索输入、表单校验等“停了才响应”的交互场景；文章不仅手写了兼顾this绑定、闭包隔离与引用一致性的可靠实现，更直击开发中高频踩坑点——如React中重复创建导致失效、组件卸载后定时器残留引发报错，并清晰对比了防抖与节流的本质区别：前者重“终态响应”，后者重“持续反馈”，真正决定性能优化成败的，从来不是代码几行，而是对用户交互意图的精准判断。

防抖（debounce）不是“阻止函数执行”，而是让函数在连续触发中只执行最后一次——适用于搜索框输入、窗口缩放等场景，核心是“等停了再干”。

debounce 函数怎么写才靠谱

手写一个基础但可用的 debounce，关键在于每次调用时清除上一次的定时器，并重设新定时器：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

注意点：

• fn.apply(this, args) 保证原函数的 this 和参数正确传递，不能直接写 fn(...args)（会丢失上下文）
• 必须把 timer 声明在闭包内，否则多个 debounce 实例会互相覆盖
• 如果需要立即执行首次调用（leading edge），得额外加标志位和逻辑，基础版默认只支持 trailing（末次执行）

为什么用 lodash.debounce 却还是没生效

常见失效原因不是函数写错，而是引用没对齐：

• 没把 debounced 函数“存起来”反复使用——比如每次渲染都重新 debounce(handleInput, 300)，等于每次都新建一个闭包，旧定时器还在跑，新函数完全无关
• 在 React 中直接写 onChange={debounce(fn, 300)}，每次 render 都生成新函数，导致事件绑定失效或内存泄漏
• 没处理 cancel()：比如组件卸载前应调用 debounced 函数的 cancel 方法（lodash 提供），否则定时器仍在后台执行，可能引发 setState 报错

防抖和节流（throttle）到底该选谁

看响应频率需求：

• 用户输入搜索、校验表单字段 → 用 debounce：只要他停了就查，中间狂敲都不发请求
• 监听 scroll 或 resize 并更新 UI 布局 → 用 throttle：哪怕用户一直拖，也要至少每 100ms 更新一次，否则界面卡顿
• 误用后果：debounce 用于滚动会导致“松手才更新”，体验像卡顿；throttle 用于搜索会漏掉最后输入，搜出旧结果

真正难的不是实现那几行代码，是想清楚“这次交互里，用户期待的是‘停了才响应’，还是‘持续中也要反馈’”。这个判断错了，后面所有优化都是往反方向使劲。

以上就是《防抖是什么？如何实现函数防抖？》的详细内容，更多关于的资料请关注golang学习网公众号！