17370845950

节流控制单位时间最多执行一次，防抖控制连续触发后只执行最后一次；节流基于时间戳或定时器限频，防抖每次触发重置定时器；需据交互场景选择，避免误用导致卡顿或逻辑丢失。

节流（throttle）和防抖（debounce）不是“选一个用就行”的功能，而是解决两类不同时机问题的工具：节流控制“单位时间最多执行一次”，防抖控制“连续触发后只执行最后一次”。用错场景会导致交互卡顿或逻辑丢失。

节流怎么写？关键在时间戳或定时器状态锁

节流的核心是限制函数执行频率。常见实现分两种思路：

• 基于时间戳：

  

  每次调用检查距离上一次执行是否超过 delay，是则执行并更新时间戳；否则跳过
• 基于定时器：首次触发设定时器，后续触发若定时器未执行完就忽略，等它完成再重置

推荐时间戳版本，无闭包堆积风险，也避免定时器未清除导致的内存泄漏：

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

注意：lastTime 必须初始化为 0 或负值，否则首次调用可能被跳过；fn.apply(this, args) 保证 this 和参数透传，不能直接写 fn(...args)（会丢失上下文）。

防抖怎么写？关键在每次触发都重置定时器

防抖适用于“等用户停下来再干活”的场景，比如搜索框输入、窗口 resize 后重新布局。核心逻辑是：每次触发都清除旧定时器，新建一个。

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

常见错误：

• 忘记清空 timer 导致多个定时器并发执行
• 没用 apply 或 bind 保留 this，导致回调里 this 指向 window（非严格模式）或 undefined（严格模式）
• 把 delay 写成字符串（如 "300"），setTimeout 会隐式转数字但易出错，建议始终传数字

节流 vs 防抖：看触发行为和预期结果

它们的区别不在代码长度，而在你希望函数响应的“节奏”：

• 用户拖拽滑块、鼠标持续 hover、滚动监听 —— 用 throttle：需要稳定反馈，比如每 100ms 更新一次位置
• 搜索框输入、表单校验、resize 后重绘 —— 用 debounce：不需要中间过程，只要最终状态

一个典型反例：在 scroll 事件里用 debounce，用户快速滚动时可能整个过程都不触发，直到松手才执行一次，体验像卡住；而用 throttle 就能保持视觉连贯性。

实际项目中容易被忽略的点

真实环境比 demo 复杂得多：

• 需要手动取消？加个 cancel 方法，清掉 timer 或重置 lastTime
• 首次立即执行？节流可加 leading: true 参数，防抖可加 immediate: true，但两者语义完全不同：节流的 leading 是“第一次立刻执行，之后按间隔走”，防抖的 immediate 是“第一次立刻执行，后续触发都重置倒计时”
• Lodash 的 throttle 默认带 trailing（最后一次触发后补一次），但原生实现不包含，别默认认为“应该有”
• Vue/React 组件卸载时，记得清除防抖节流函数持有的定时器或引用，否则可能引发 setState on unmounted component 报错

真正难的不是写出一个能跑的 throttle 或 debounce，而是判断当前交互中用户到底“在等什么”，以及这个“等”是由系统决定，还是由用户行为节奏决定。