17370845950

防抖是等用户操作停止后执行，核心为重置计时；节流是固定间隔执行，核心为强制间隔；选择依据是业务语义：需最终结果用防抖，需过程反馈用节流。

防抖 debounce：等用户“停下来”再干活

防抖的核心是「重置计时」：只要事件还在频繁触发，就不断清掉上一个定时器，只在最后一次触发后等待指定时间才执行函数。它不是限制频率，而是确保“操作结束后的最终响应”。

• 典型场景：input 搜索框输入、resize 窗口调整、表单实时验证（比如邮箱格式）
• 关键参数：wait 时间不能太短（如 100ms），否则起不到过滤作用；也不宜过长（如 > 500ms），否则用户会感知延迟
• 常见错误：没保存 this 和 arguments，导致回调里 this 指向丢失或参数为空；漏掉 clearTimeout 导致内存泄漏或误执行

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

节流 throttle：固定节奏“匀速干活”

节流的核心是「强制间隔」：无论事件多密集，函数最多每隔 interval 毫秒执行一次。它不关心用户是否停手，只保证执行节奏可控。

• 典型场景：scroll 滚动加载、mousemove 拖拽位置更新、keydown 射击游戏按键限制
• 两种主流实现方式：时间戳版（更精准，但首次立即执行）、定时器版（首次有延迟，但更易理解）
• 容易踩的坑：用 setTimeout 实现时未设标志位（如 inThrottle），导致多次进入逻辑；时间间隔设得太小（如 16ms）反而逼近帧率，失去节流意义

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

debounce 和 throttle 到底该选哪个？看触发意图

别死记“搜索用防抖、滚动用节流”，关键看业务语义：

• 需要“最后一次动作的结果” → 选 debounce（例如：用户输完手机号才校验格式）
• 需要“持续过程中的状态反馈” → 选 throttle（例如：滚动时每 200ms 检查是否接近底部）
• 两者都能用但效果不同：对 resize，debounce 是等拖完再重排布局；throttle 是边拖边有限更新尺寸——后者可能造成布局抖动，前者更稳

实际项目中必须注意的细节

真实代码里，这两个函数不是写完就能直接塞进 addEventListener 的：

• 必须用闭包缓存返回的防抖/节流函数，避免每次监听都新建一个（否则 clearTimeout 失效）
• 现代浏览器支持 passive: true，但和 throttle 配合时要注意：节流函数若内部调用 preventDefault，就不能设为 passive
• Vue/React 中绑定事件时，别在 render 里直接调用 debounce(fn, 300)，会导致每次渲染都生成新函数，破坏事件绑定稳定性

真正难的不是写出这两个函数，而是在滚动监听里发现卡顿后，能立刻判断是该加节流、换时间戳实现，还是该把计算逻辑移到 requestIdleCallback 里去。