17370845950

防抖只执行最后一次触发，适用于输入搜索等需等待用户停止操作的场景；节流则按固定频率执行，适合滚动监听等需持续反馈的场景。

防抖（Debounce）和节流（Throttle）是处理高频触发事件（比如 resize、scroll、input、mousemove）的两种经典策略，核心目标都是减少函数实际执行次数，避免性能浪费或逻辑错乱。

防抖：只响应“最后一次”操作

防抖的逻辑是：在指定等待时间内，如果事件被反复触发，就重置计时器；只有当事件停止触发超过设定时间后，才真正执行一次函数。适合用于“等用户停下来再干活”的场景，比如搜索框输入联想、窗口大小调整后的布局重排。

• 典型用法：用户每输一个字都清空上一个定时器，1秒内没再输入，才发起搜索请求
• 实现关键：每次触发都调用 clearTimeout，再新建 setTimeout
• 注意点：要保存定时器 ID，且需考虑立即执行（leading edge）和尾部执行（trailing edge）的区别；常见工具库如 Lodash 默认只支持 trailing

节流：固定频率执行，不漏关键时机

节流的逻辑是：无论事件触发多频繁，在单位时间内最多只执行一次函数。适合需要持续反馈但又不能太密的场景，比如滚动监听中计算元素是否进入视口、鼠标拖拽时更新位置。

• 两种主流实现方式：定时器版（推荐）和时间戳版；定时器版更易理解且能保证至少执行一次（最后触发后也会补上）
• 定时器版要点：用 setTimeout 控制间隔，触发时若无活跃定时器则启动，执行完再清空
• 时间戳版要点：记录上次执行时间戳，每次触发时对比当前时间，差值达标才执行并更新时间戳；但可能漏掉最后一次触发

怎么选？看业务需求是否允许“延迟响应”

如果用户行为有明确的“结束信号”（如输入完成、拖拽松手），且你只关心最终状态，优先用防抖；如果需要过程反馈（如滚动中实时显示进度、游戏里持续检测按键），必须用节流。

• 搜索建议、表单校验 → 防抖（避免频繁请求/验证）
• 无限滚动加载、鼠标跟随、Canvas 动画控制 → 节流（保持响应节奏）
• 有些场景可组合使用：例如先节流限制频率，再对节流后的结果做防抖（较少见，需谨慎设计）

实际应用小贴士

别直接裸写 setTimeout，封装成可复用函数，并支持取消、配置参数；现代项目建议用 Lodash 的 debounce 和 throttle，它们已处理好 this 绑定、参数透传、取消机制等细节。

• 记得在组件卸载或事件解绑前调用防抖/节流函数的 cancel 方法（Lodash 提供），防止内存泄漏或执行过期回调
• 调试时可在函数内加 console.log 观察触发节奏，确认是否符合预期
• 移动端要注意 touchmove 比 mousemove 更高频，更需节流