17370845950

防抖是事件停止触发一段时间后执行一次，节流是按固定间隔最多执行一次；二者均通过限制高频事件回调次数来减少计算、DOM操作和请求，提升性能。

防抖（Debounce）和节流（Throttle）是 JavaScript 中两种常用的函数执行控制技术，核心作用是减少高频事件（如 resize、scroll、input、mousemove）触发的函数调用次数，从而避免不必要的计算、DOM 操作或请求，显著提升页面响应速度和运行效率。

防抖：等你“停下来”再执行

防抖的逻辑是：只要事件持续触发，就不断重置定时器；只有当事件停止触发一段时间（比如 300ms）后，才真正执行一次函数。

• 适合场景：搜索框输入联想（用户打字停顿后再发请求）、窗口大小调整后重新布局（等用户拖完再重排）
• 关键点：最后一次触发决定是否执行，中间所有触发都被“忽略”
• 简单实现：每次调用时先清除旧定时器，再设新定时器

节流：固定节奏，“匀速”执行

节流的逻辑是：无论事件触发多频繁，函数都按固定时间间隔（比如每 100ms）最多执行一次。

• 适合场景：滚动监听做懒加载、鼠标移动轨迹采集、高频 but 需要持续反馈的操作
• 关键点：保证函数执行频率有上限，但不丢失“节奏感”
• 常见实现方式：用时间戳判断距上次执行是否超时，或用定时器开关控制

为什么能提升性能？

高频事件若不做限制，可能在 1 秒内触发几十甚至上百次回调，带来明显负担：

• 反复计算 layout / paint（导致强制同步布局）
• 连续发起 Ajax 请求（浪费带宽、压垮后端）
• 频繁操作 DOM（引发多次重排重绘）
• 阻塞主线程，让页面卡顿、交互失灵

加了防抖或节流后，实际执行次数可能降到个位数，CPU 和网络压力大幅下降，用户体验更顺滑。

选哪个？看需求节奏

• 要“等用户做完再说” → 选防抖（比如搜索、表单校验）
• 要“持续响应但别太密” → 选节流（比如滚动监听、游戏控制）
• 现代开发中，Lodash 的 _.debounce 和 _.throttle 可直接使用，也支持取消、立即执行等增强选项

基本上就这些。不复杂，但容易忽略——尤其在写交互效果时随手绑个 onscroll 就跑全量逻辑，性能隐患往往从这里开始。