17370845950

节流和防抖是控制函数执行频率的技术：防抖在事件停止后执行一次，适用于搜索联想、防重复提交；节流按固定间隔执行，适用于滚动监听、拖拽更新。

节流（Throttle）和防抖（Debounce）都是用来控制函数执行频率的技术，核心目标是减少高频触发带来的性能压力，比如滚动、输入、窗口缩放等场景。它们不是互斥的方案，而是适用不同业务逻辑——关键看“你希望函数在连续触发中怎么响应”。

防抖：等“停”了再执行

防抖的逻辑是：只要事件还在持续触发，就不断重置定时器；只有当触发完全停止超过设定时间后，才真正执行一次函数。

• 适合场景：搜索框输入联想、表单校验、按钮提交防重复点击
• 典型表现：“用户打完字、停顿 300ms 后才发请求”
• 实现要点：每次触发前先清除上一个定时器，再新建一个

节流：固定节奏执行

节流的逻辑是：无论事件触发多频繁，都保证函数按固定间隔（如每 200ms）最多执行一次。

• 适合场景：滚动监听计算吸顶、鼠标拖拽位置更新、Canvas 动画帧控制
• 典型表现：“滚动过程中，每 200ms 最多更新一次位置，不卡顿也不丢关键状态”
• 实现要点：可用时间戳比对或定时器开关（leading/trailing 可选）

一个例子看区别

假设用户在 1 秒内快速滚动了 50 次：

• 用防抖（delay=300ms）：只要滚动没停满 300ms，函数一次都不执行；停稳后只执行最后一次
• 用节流（interval=200ms）：大概率会执行 4～5 次（第 0ms、200ms、400ms…），节奏可控

简单可直接用的代码片段

防抖（返回新函数）：

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

节流（时间戳版，立即执行一次）：

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

基本上就这些。选哪个不取决于“哪个更高级”，而取决于你的交互预期：要“最后稳态结果”，就用防抖；要“过程有节奏地响应”，就用节流。