[!info] related notes

• 所属 MOC: 浏览器 JS MOC, frontend-engineering-performance-optimization
• 上位主题: 浏览器中的 JavaScript
• 相关概念: javascript-events, 浏览器渲染流程
• 前置概念: JS 事件循环
• 实现模式: 防抖节流封装模式

防抖与节流

高频事件（scroll、resize、input）直接处理会卡顿或浪费资源，需要控制触发频率。

防抖（Debounce）

事件停止一段时间后再执行，期间持续触发则重置计时。

适用：搜索输入联想、窗口 resize 最终处理。

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

节流（Throttle）

固定时间内最多执行一次，无论触发多少次。

适用：滚动监听、鼠标移动、按钮防连点。

function throttle(fn, interval) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

区别

特性	防抖	节流
执行时机	停止触发后延迟执行	固定间隔执行
适用场景	只关心最终结果	需要过程中的规律响应
典型场景	搜索框输入	滚动事件

最容易误解的点

• 防抖不是”延迟执行”，而是”延迟到停止后执行”
• 节流不是防抖的简化版，两者的语义不同
• 两者都需要 apply(this, args) 保持上下文和参数传递

学习检查

不看正文回答：

1. Debounce 与 Throttle 分别保留了高频事件流中的什么信息？
2. 为什么 debounce 不是普通“延迟执行”？
3. 为什么 throttle 不是 debounce 的简化版？
4. 搜索联想、resize 后重算、scroll progress、拖拽采样分别更适合哪一种？
5. leading / trailing 语义会怎样改变用户体验？
6. cancel / flush 为什么在真实组件生命周期里有价值？
7. 给一个每 10ms 触发、持续 500ms 的事件流，画出 debounce 与 throttle 的可能执行时间点。

放回主题图里看

• 事件系统：javascript-events
• 浏览器渲染：浏览器渲染流程
• 事件循环：JS 事件循环