javascript节流是什么_它与防抖有何区别?

节流是固定时间间隔内最多执行一次函数,如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 函数,而是判断某个高频事件里,你到底要“抓过程”还是“等结果”。选错策略,性能优化反而变成体验降级。