JavaScript 防抖与节流

JavaScript 防抖与节流用于控制连续事件触发工作任务的频率，适用于输入、滚动、尺寸变化等高频交互。

防抖

尾沿防抖在最后一次调用后的等待时间结束时执行；等待期间的新调用会重置计时器。搜索输入常采用这种形式，以减少输入过程中的请求。

以下实现保留最后一次调用的参数与 this，提供取消功能；不提供返回 Promise、立即执行或最长等待时间等扩展行为。

function debounce(fn, wait) {
  let timer;
  function wrapped(...args) {
    clearTimeout(timer);
    const receiver = this;
    timer = setTimeout(() => {
      timer = undefined;
      fn.apply(receiver, args);
    }, wait);
  }
  wrapped.cancel = () => {
    clearTimeout(timer);
    timer = undefined;
  };
  return wrapped;
}

组件卸载时应取消尚未执行的任务。连续输入不停止时，纯尾沿防抖可能一直不执行；有周期执行需求时需要考虑 maxWait 或其他策略。

参考：防抖定义。

节流

节流限制一段时间内的执行频率，即使事件持续触发，也允许工作周期性执行。实现前必须明确是否在窗口开始立即执行、是否在结束时补一次，以及最后一次参数是否应保留。

滚动统计可按时间节流；视觉更新也可结合 requestAnimationFrame 按渲染节奏调度。两者不能简单等同于精确的固定毫秒间隔。

参考：节流定义。

与异步竞态的区别

防抖减少调用次数，但无法保证已发出的请求按顺序返回。搜索仍需用请求序号、取消信号或失效标记阻止旧结果覆盖新结果。重复提交也不能只依赖防抖，涉及写入时还应明确服务端幂等与失败重试语义。