17370845950

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

JavaScript 的防抖（Debounce）和节流（Throttle）是两种用于控制函数执行频率的技术，核心作用是避免函数在短时间内被频繁调用，从而提升性能、减少资源浪费，并改善用户体验。

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

防抖的逻辑是：当事件持续触发时，不立即执行函数，而是等待一段时间（比如 300ms），如果这段时间内事件再次被触发，就重新计时；只有当事件停止触发且等待期满后，才真正执行一次函数。

• 典型场景：搜索框输入联想、窗口大小调整（resize）、表单输入校验
• 适合“等用户停下来再干活”的需求，比如用户还在打字，就不发请求；等他停了 300ms，再发起搜索
• 实现关键：每次触发都清除上一个定时器，再新建一个

节流：固定频率执行，有节制地响应

节流的逻辑是：无论事件触发多频繁，在指定时间间隔（比如 100ms）内，函数最多只执行一次。它保证函数按稳定节奏运行，而不是完全忽略中间调用。

• 典型场景：鼠标滚轮监听（scroll）、拖拽（drag）、游戏帧更新
• 适合“不能太慢，也不能太快”的场景，比如滚动时每 100ms 最多更新一次导航高亮
• 实现方式常见有两种：定时器版（延迟执行）、时间戳版（立即执行）

为什么它们在处理事件时必不可少

浏览器中很多原生事件（如 input、scroll、resize）会高频触发——用户快速输入可能每秒几十次，滚动页面可能每秒上百次。若直接在这些事件回调里做耗时操作（如发 Ajax、重绘 DOM、计算布局），会导致：

• 主线程长时间被占用，页面卡顿、交互失灵
• 重复请求浪费带宽和服务器资源（例如搜“hello”打出每个字母都请求一次）
• 触发不必要的重排重绘，影响渲染性能
• 移动端尤其敏感，容易造成掉帧甚至白屏

简单对比帮你选对方案

防抖：强调“最后的结果”，适合需要等用户意图明确后再响应的场景；节流：强调“过程的节奏”，适合需要持续反馈但又不能过载的场景。实际开发中，输入类优先考虑防抖，滚动/拖拽类更常用节流。