节流是固定时间间隔内最多执行一次函数，如300ms内仅执行一次；实现有时间戳版（推荐，稳定无延迟）和定时器标记版（首次立即执行但后续可能卡顿）。

节流（throttle）是让函数在固定时间间隔内最多执行一次，不管事件触发多频繁。它不是“等停了再执行”，而是“定时发车”——比如设了 300ms，那无论你滚动 10 次还是 100 次，每 300ms 最多只调用一次回调。

节流函数怎么写？两种主流实现方式

最常用的是「时间戳」和「定时器标记」两种逻辑，它们行为一致但边界处理不同：

• 时间戳版：每次执行前比对 Date.now() 和上次执行时间，差值 ≥ 间隔才执行并更新时间戳
• 定时器标记版：用布尔值 inThrottle 锁住入口，执行后设为 true，等 setTimeout 回来再解锁

推荐时间戳版——它不依赖异步队列状态，更稳定，且无“首次触发延迟”的问题（标记版第一次调用会立即执行，但第二次得等定时器结束才放行，中间可能卡住）。

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

防抖（debounce）和节流到底差在哪？看触发节奏

关键不在“谁更快”，而在执行时机的语义完全不同：

• 防抖：debounce(fn, 500) → 用户停止触发 500ms 后才执行一次，中间所有触发都被丢弃
• 节流：throttle(fn, 500) → 只要触发，就尝试执行；但每 500ms 内只允许成功一次，其余被跳过

举个真实例子：监听 scroll 事件做懒加载

• 用防抖？用户一滚到底，停住 → 等 500ms 后才检查是否到边，体验卡顿、加载滞后
• 用节流？滚动中每 500ms 检查一次位置，响应及时，又不爆炸式调用

别踩这些坑：参数、this、清除与实际场景错配

常见错误不是写错语法，而是没想清上下文：

• 漏传 ...args 或用 arguments 而没正确绑定 this → 回调里拿不到事件对象或 DOM 元素
• 把节流用在搜索框输入上 → 用户还在打字，函数已执行多次，发了冗余请求（该用防抖）
• 把防抖用在鼠标拖拽位置更新上 → 拖动结束才更新坐标，UI 完全跟不上手（该用节流）
• 没考虑 leading / trailing 配置（如 Lodash 版）→ 默认只支持 trailing，但有些按钮点击需要“立刻执行+后续节流”，就得自己加逻辑

真正难的从来不是写出一个 throttle 函数，而是判断某个高频事件里，你到底要“抓过程”还是“等结果”。选错策略，性能优化反而变成体验降级。