如何用javascript实现防抖节流【教程】

防抖和节流是解决高频触发的两种不同策略：防抖适用于用户停止后执行（如搜索输入），节流适用于固定频率执行（如滚动监听）；需注意this绑定、参数传递、cancel清理及SSR兼容性。

防抖和节流不是“选一个用就行”的功能，而是解决不同场景下高频触发问题的两种策略：防抖适用于「等用户停下来再执行」（比如搜索框输入、窗口 resize 后校准布局），节流适用于「固定频率执行」（比如鼠标持续拖拽、滚动监听上报）。直接套代码容易出错，关键得看清楚触发时机和 this、参数、取消逻辑怎么处理。

防抖函数必须手动 cancel 才能真正可控

很多实现只返回一个包装函数，没暴露 cancel 方法，导致无法主动清空待执行任务。比如表单输入中用户切到别的 tab，你得在组件卸载时取消 pending 的请求，否则可能触发 setState on unmounted component 错误。

实操建议：

• 用闭包保存定时器 ID，每次调用先 clearTimeout 再 setTimeout
• 返回的函数对象上挂载 cancel 方法，内部执行 clearTimeout 并重置 ID 为 NULL
• 注意 this 绑定 —— 不要用箭头函数包裹主体逻辑，否则丢失原始上下文；推荐用 func.apply(this, args)
• 如果需要首次立即执行（leading edge），得单独判断定时器是否为 null，且不能和 trailing 混用

节流要分清楚「时间戳版」和「定时器版」的适用差异

时间戳版节流（用 previous 记录上次执行时间）会在触发间隔大于阈值时立刻执行，但最后一次触发若未达间隔则被丢弃；定时器版（用 setTimeout + 状态锁）能保证最后一次也执行，但首次会有延迟。react 中监听 scroll 常用前者，而 canvas 动画控制倾向后者。

立即学习“Java免费学习笔记（深入）”；

实操建议：

• 时间戳版：检查 now - previous >= delay，满足则执行并更新 previous = now
• 定时器版：用布尔变量 isPending 控制，触发时若为 false 则执行并设为 true，执行完再 setTimeout 清除状态
• 两者都需用 func.apply(this, args) 保持上下文，不能简单写成 func(...args)（会丢失 this）
• 别把节流 delay 设成 0 —— 浏览器最小 timer 约 4ms，且 0 会退化成同步执行，失去节流意义

vue/React 里直接用封装好的 hook 更安全

手写防抖节流在组件内容易忽略生命周期清理，比如 Vue 的 onUnmounted 或 React 的 useEffect cleanup。尤其防抖的 pending 定时器，不清理就会造成内存泄漏或状态错乱。

实操建议：

• Vue 3 推荐用 @vueuse/core 的 useDebounceFn 和 useThrottleFn，它们自动绑定 onBeforeUnmount
• React 可用 use-debounce（支持 promise 防抖）或自定义 hook，内部用 useRef 存定时器 ID，useEffect 返回 cleanup 函数
• 避免在 render 中反复创建防抖函数（如 onClick={debounce(handleClick, 300)}），应提前定义或用 useCallback 缓存
• 服务端渲染（SSR）环境没有 setTimeout，需加 typeof window !== 'undefined' 判断

最常被忽略的是 this 和参数传递的完整性，以及 cleanup 的时机 —— 很多 bug 表现为「点了没反应」或「点了两次才触发」，其实只是上下文丢了或者定时器没清干净。