[!info] related notes

• 所属 MOC: javascript-in-browser-moc, frontend-engineering-performance-optimization
• 上位主题: javascript-in-browser
• 相关概念: javascript-events, browser-rendering-process
• 前置概念: js-event-loop

防抖与节流

高频事件（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) 保持上下文和参数传递

面试要点

来自 debounce-vs-throttle-interview-question 的面试视角整理。

一句话回答

防抖是等连续触发停止一段时间后再执行一次，节流是让高频触发在固定时间内最多执行一次。

最稳的回答主线

防抖

• 更关注最后一次结果
• 适合搜索输入、窗口 resize 最终处理

节流

• 更关注过程中的规律响应
• 适合滚动监听、鼠标移动、按钮防连点

面试里一句很稳的话

如果场景只关心用户停下来之后的结果，更像防抖；如果过程里也需要持续反馈，更像节流。

最短记忆方式

防抖等停下，节流控频率。

放回主题图里看

• 事件系统：javascript-events
• 浏览器渲染：browser-rendering-process
• 事件循环：js-event-loop