JavaScript防抖与节流是什么_如何优化性能【教程】_技术教程

debounce 和 throttle 本质不同：debounce 等“停”，throttle 控“频”；输入框搜索必须用 debounce，scroll/resize 推荐 throttle；二者均需正确处理 this、定时器清除及初始化。

debounce 和 throttle 不是“要不要用”的问题，而是“用错就白优化”的问题。它们本质都是对高频事件的节制策略，但逻辑完全不同：一个等“停”，一个控“频”。

防抖函数 `debounce` 怎么写才不漏清定时器？

核心陷阱是：clearTimeout 作用在了错误的 timerId 上，或者没处理 undefined 初始值导致报错。

必须用闭包保存 timerId，不能挂全局或依赖外部变量
timerId 初始化为 null 或 undefined，否则首次 clearTimeout(undefined) 虽不报错，但容易掩盖逻辑漏洞
参数和 this 必须透传，推荐用 func.apply(this, args)，别直接 func(...args)（会丢掉原始上下文）
支持 immediate 模式时，“立即执行”和“延迟执行”不能共存，要靠 !timerId 判断是否首次

function debounce(func, delay, immediate = false) {
  let timerId = null;
  return function(...args) {
    const callNow = immediate && !timerId;
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      timerId = null;
      if (!immediate) func.apply(this, args);
    }, delay);
    if (callNow) func.apply(this, args);
  };
}

节流函数 `throttle` 为什么时间戳版比定时器版更稳？

定时器版（setTimeout 锁定 + 解锁）在极端高频触发下可能“吞掉”首尾调用；时间戳版用 Date.now() 记录上次执行时间，每次只比对间隔，逻辑更线性、无状态依赖。

时间戳版适合 scroll/resize 等需“保底执行”的场景，但无法保证首次立即执行
如果需要首尾都可控（比如拖拽开始立刻响应、结束再收尾），得组合两种逻辑，或直接用 Lodash 的 _.throttle({ leading: true, trailing: true })
注意 Date.now() 在低性能设备上可能有毫秒级偏差，但对前端节流影响可忽略

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