防抖和节流是控制高频事件执行频率的优化策略：防抖在事件停止触发后执行一次，适用于搜索、校验等；节流按固定间隔执行，适用于滚动、拖拽等。
防抖和节流是 JavaScript 中用来控制高频事件执行频率的两种经典优化策略。它们不改变功能逻辑，而是通过“时间维度”的调度，让本可能一秒触发几十次的回调，变成只执行 1 次或按固定节奏执行，从而显著降低 CPU 占用、减少网络请求、避免 UI 卡顿。
防抖（Debounce）：等你“停手”再响应
核心逻辑是：只要事件还在持续触发，就不断重置计时器；只有当事件完全停止触发超过设定延迟（如 300ms），才真正执行一次回调。
- 适合场景：用户输入类操作——比如搜索框联想、表单实时校验、窗口 resize 后重新布局
- 关键特点：最后一次操作决定是否执行，中间所有触发都被“吞掉”
- 简单实现要点：每次调用都 clearTimeout 原定时器，再 set 新的 setTimeout
- 例子：用户在搜索框快速输入 “react”，每敲一个字母都触发 input 事件，但防抖后，只在用户停顿 300ms 后发送一次请求查 “react”
节流（Throttle）：固定节奏，稳住频率
核心逻辑是：无论事件多频繁，函数最多每隔固定时间（如 100ms）执行一次。就像地铁发车，到点就走，不等人也不加开。
- 适合场景：滚动加载、拖拽定位、鼠标移动追踪、动画帧同步
- 关键特点：保证执行节奏，兼顾响应及时性与资源可控性
- 常见实现方式有两种：
– 时间戳版：记录上一次执行时间，当前时间减去它 ≥ 间隔才执行
– 定时器版：用 flag 或 timer 标记是否处于“冷却中”，冷却结束才允许下一次执行 - 例子：监听 scroll 事件判断是否到底部，节流后每 100ms 最多检查一次，而不是滚动像素就检查一次（可能一秒上百次）
怎么选？看你的需求节奏
如果希望“等用户彻底做完再行动”，选防抖；
如果希望“不管用户多急，我都按自己的节奏响应”，选节流。
立即学习“Java免费学习笔记（深入）”；
- 输入搜索 → 防抖（避免中间乱搜）
- 滚动监听 → 节流（保证能及时响应，又不卡死）
- 按钮防重复点击 → 防抖（立即执行版更合适：点击瞬间禁用，delay 后恢复）
- Canvas 绘图跟随鼠标 → 节流（防止绘制帧率爆表）
基本上就这些。写法不复杂，但容易忽略 this 绑定、参数透传、清除定时器时机等细节。实际项目中，推荐优先用 Lodash 的 _.debounce 和 _.throttle，它们已处理好边界情况，稳定可靠。
