防抖与节流：从概念到实战，一次彻底搞懂

防抖与节流：从概念到实战，一次彻底搞懂

在前端开发里，input、scroll、resize、mousemove这类事件会被高频触发。
如果每次触发都直接执行复杂逻辑（请求、重排、计算），页面就容易卡顿、抖动、掉帧。

防抖（Debounce）和节流（Throttle）就是解决这类问题的两把核心工具。

1. 为什么需要防抖与节流

常见问题场景：

1. 搜索框输入时，每敲一个字就发请求，接口压力大。
2. 页面滚动时频繁计算位置，导致滚动不流畅。
3. 窗口缩放时不断重算布局，CPU 占用飙升。
4. 按钮被连续点击，触发重复提交。

本质问题：事件触发频率远高于业务真正需要的执行频率。

2. 核心概念与区别

防抖：在一段时间内如果再次触发，就重新计时；只在“停止触发后”执行一次。
节流：在固定时间窗口内最多执行一次；不管触发多少次，都按节奏执行。

一句话记忆：

1. 最后一次重要：用防抖。
2. 过程反馈重要：用节流。

3. 时间线理解（高频触发时）

假设wait = 300ms，事件连续触发：

1. 防抖：只在最后一次触发后等待 300ms 执行。
2. 节流：每 300ms 最多执行一次（可配置首触发、尾触发）。

4. 防抖实现（可生产使用）

functiondebounce(fn,wait=300,options={}){lettimer=null;letlastArgs=null;letlastThis=null;constimmediate=!!options.immediate;functioninvoke(){constresult=fn.apply(lastThis,lastArgs);lastArgs=lastThis=null;returnresult;}functiondebounced(...args){lastArgs=args;lastThis=this;if(timer)clearTimeout(timer);if(immediate&&!timer){invoke();}timer=setTimeout(()=>{timer=null;if(!immediate&&lastArgs){invoke();}else{lastArgs=lastThis=null;}},wait);}debounced.cancel=function(){if(timer)clearTimeout(timer);timer=null;lastArgs=lastThis=null;};debounced.flush=function(){if(!timer)return;clearTimeout(timer);timer=null;if(lastArgs)invoke();};returndebounced;}

适用场景：

1. 搜索框联想。
2. 表单实时校验。
3. 停止拖拽后再做最终计算。

5. 节流实现（支持 leading/trailing）

functionthrottle(fn,wait=300,options={}){lettimer=null;letlastArgs=null;letlastThis=null;letlastCallTime=0;constleading=options.leading!==false;consttrailing=options.trailing!==false;functioninvoke(time){lastCallTime=time;fn.apply(lastThis,lastArgs);lastArgs=lastThis=null;}functionthrottled(...args){constnow=Date.now();if(!lastCallTime&&!leading){lastCallTime=now;}constremaining=wait-(now-lastCallTime);lastArgs=args;lastThis=this;if(remaining<=0||remaining>wait){if(timer){clearTimeout(timer);timer=null;}invoke(now);}elseif(!timer&&trailing){timer=setTimeout(()=>{timer=null;invoke(leading?Date.now():0);},remaining);}}throttled.cancel=function(){if(timer)clearTimeout(timer);timer=null;lastArgs=lastThis=null;lastCallTime=0;};throttled.flush=function(){if(!timer)return;clearTimeout(timer);timer=null;if(lastArgs)invoke(Date.now());};returnthrottled;}

适用场景：

1. 滚动监听。
2. 鼠标移动跟随。
3. 窗口 resize 过程中的轻量更新。

6. 选型清单（最常见）

1. 搜索输入：防抖。
2. 滚动加载/吸顶计算：节流。
3. resize 过程中的重绘：节流。
4. 表单提交按钮防重复点击：节流（或按钮锁）。
5. 拖拽结束后落点计算：防抖。

7. Vue/React 落地要点

1. 在组件初始化时创建防抖/节流函数实例。
2. 在组件卸载时执行cancel()。
3. 不要在每次渲染里重新创建包装函数。
4. 涉及请求时，额外处理竞态问题（只认最后一次响应）。

8. 常见坑

1. this丢失：包装函数里要用apply透传上下文。
2. 参数丢失：保存并透传...args。
3. 忘记清理定时器：组件销毁后仍触发回调。
4. 防抖后仍乱序：后发请求不一定后返回，要做结果兜底。
5. 盲目使用：有些场景需要实时响应，不应强行防抖。

9. 面试高频问答（精简版）

1. 防抖和节流的核心区别是什么？
   防抖是“收敛到最后一次”，节流是“按固定频率执行”。

2. 输入框搜索为什么常用防抖？
   用户停止输入后再请求，减少无效调用。

3. 滚动监听为什么常用节流？
   滚动过程需要持续反馈，但不能每帧都执行重逻辑。

4. leading和trailing是什么？
   leading控制是否首次立即触发，trailing控制窗口结束是否补一次。

5. 为什么要有cancel和flush？
   cancel用于销毁/中断，flush用于立即执行待处理任务。

6. 防抖/节流能完全解决性能问题吗？
   不能。它只控制调用频率，重计算本身仍需优化。

10. 总结

防抖和节流都是“频率控制”，但目标不同：

1. 防抖解决“抖动触发太多”，强调最终结果。
2. 节流解决“持续触发太快”，强调稳定节奏。

最终口诀：

1. 最后一次重要，用防抖。
2. 过程反馈重要，用节流。
3. 生产可用实现必须带cancel/flush，并在组件卸载时清理。