什么是javascript的防抖和节流技术_它们怎样优化事件处理性能

防抖和节流是事件处理的函数控制策略，非语法特性；防抖“等停手再执行”，适用于搜索、校验等场景；节流“固定频率执行”，适用于滚动、绘图等场景；二者需根据是否丢弃中间态、是否响应首尾等决策点合理选用。

防抖（debounce）和节流（throttle）不是语法特性，而是事件处理的函数控制策略——它们不改变 javaScript 本身，但能显著减少高频触发时的执行次数，避免卡顿、重复请求或渲染压力。

防抖：debounce 怎么写？什么时候该用？

防抖的核心逻辑是「等用户停手再执行」。比如搜索框输入、窗口 resize 监听，你并不需要每次按键或每次缩放都立刻响应，而是等用户停下来（比如 300ms 内没再触发），才执行一次回调。

常见错误是把定时器定义在闭包外、或没清理上一次的 setTimeout，导致多次触发后只执行最后一次——但实际可能执行了中间某次，甚至漏掉最后一次。

正确做法是每次触发前先清除旧定时器：

立即学习“Java免费学习笔记（深入）”；

function debounce(fn, delay) {   let timer;   return function(...args) {     clearTimeout(timer);     timer = setTimeout(() => fn.apply(this, args), delay);   }; }

• 适用于：输入搜索、表单校验、按钮防重复点击（配合 disabled 更稳妥）
• delay 太小（如 50ms）几乎无效；太大（如 1s）会明显感知延迟，通常 150–300ms 是较平衡的选择
• 注意：防抖函数返回的是新函数，需赋值给事件处理器，不能直接调用

节流：throttle 的两种主流实现方式

节流强调「固定频率执行」，比如滚动监听、鼠标移动轨迹采集，你希望每 100ms 最多执行一次，而不是等用户停下——否则用户快速滚动时根本收不到回调。

常见误区是以为「用 setTimeout + 时间戳判断」就够了，但容易漏掉最后一次触发（比如用户拖到页面底部后停止，却没触发最终处理）。更稳妥的是双模式：时间戳 + 定时器兜底。

推荐使用时间戳 + 定时器组合的实现：

function throttle(fn, limit) {   let lastCall = 0;   let timer;   return function(...args) {     const now = Date.now();     if (now - lastCall >= limit) {       fn.apply(this, args);       lastCall = now;     } else if (!timer) {       timer = setTimeout(() => {         fn.apply(this, args);         lastCall = Date.now();         timer = null;       }, limit - (now - lastCall));     }   }; }

• 适用场景：滚动加载、canvas 绘图更新、游戏帧同步逻辑
• 纯时间戳版简单但可能丢失结尾；纯定时器版易堆积未执行任务；组合版兼顾及时性与完整性
• 注意：节流函数内部维护状态，不能直接用于多个不同上下文（如多个元素绑定同一节流函数但期望各自独立计时），需单独实例化

lodash.debounce 和 lodash.throttle 的默认行为差异

很多人直接引入 Lodash，但没注意它俩默认参数不同：debounce 默认启用 leading: false, trailing: true（首次不执行，末次执行）；而 throttle 默认是 leading: true, trailing: false（首次立即执行，末次不保证）。

这意味着：

• 如果你依赖「第一次触发就响应」（如点击按钮立刻禁用），要用 { leading: true }
• 如果必须确保最后一次触发被处理（如 resize 后要重排布局），对 debounce 不用改，默认已支持；对 throttle 则需显式加 { trailing: true }
• Lodash 的节流还支持 maxWait 参数，防止因用户持续操作导致回调永远不执行——这是手写版常忽略的关键兜底机制

真正难的不是写出一个能跑的 debounce 或 throttle，而是想清楚：这个事件是否允许丢弃中间态？是否必须响应起始或结束？有没有并发上下文？这些决策点比代码本身更容易出错。