防抖只执行最后一次操作，节流按固定频率执行；防抖适用于搜索输入等需用户停止后响应的场景，节流适用于滚动监听等需持续稳定反馈的场景。
JavaScript 的防抖（Debounce）和节流（Throttle）是两种用于控制函数执行频率的技术，核心作用是避免函数在短时间内被频繁调用，从而提升性能、减少资源浪费，并改善用户体验。
防抖：只响应最后一次操作
防抖的逻辑是：当事件持续触发时，不立即执行函数，而是等待一段时间（比如 300ms），如果这段时间内事件再次被触发，就重新计时；只有当事件停止触发且等待期满后，才真正执行一次函数。
- 典型场景：搜索框输入联想、窗口大小调整（resize）、表单输入校验
- 适合“等用户停下来再干活”的需求，比如用户还在打字，就不发请求；等他停了 300ms，再发起搜索
- 实现关键：每次触发都清除上一个定时器，再新建一个
节流：固定频率执行，有节制地响应
节流的逻辑是：无论事件触发多频繁，在指定时间间隔（比如 100ms）内，函数最多只执行一次。它保证函数按稳定节奏运行，而不是完全忽略中间调用。
- 典型场景：鼠标滚轮监听（scroll）、拖拽（drag）、游戏帧更新
- 适合“不能太慢，也不能太快”的场景，比如滚动时每 100ms 最多更新一次导航高亮
- 实现方式常见有两种：定时器版（延迟执行）、时间戳版（立即执行）
为什么它们在处理事件时必不可少
浏览器中很多原生事件（如 input、scroll、resize）会高频触发——用户快速输入可能每秒几十次，滚动页面可能每秒上百次。若直接在这些事件回调里做耗时操作（如发 Ajax、重绘 DOM、计算布局），会导致：
立即学习“Java免费学习笔记（深入）”；
- 主线程长时间被占用，页面卡顿、交互失灵
- 重复请求浪费带宽和服务器资源（例如搜“hello”打出每个字母都请求一次）
- 触发不必要的重排重绘，影响渲染性能
- 移动端尤其敏感，容易造成掉帧甚至白屏
简单对比帮你选对方案
防抖：强调“最后的结果”，适合需要等用户意图明确后再响应的场景；节流：强调“过程的节奏”，适合需要持续反馈但又不能过载的场景。实际开发中，输入类优先考虑防抖，滚动/拖拽类更常用节流。
