JavaScript节流是什么？如何控制滚动触发频率

JavaScript节流（throttle）是一种关键的性能优化技术，专门用于应对滚动、拖拽等高频事件引发的页面卡顿、重排频繁和CPU飙升问题；它并非阻止事件触发，而是智能地将回调函数限制为固定时间间隔内最多执行一次，并灵活支持首次立即执行（leading）和结束时补发（trailing）两种模式，兼顾响应性与准确性；文章不仅剖析了手写健壮节流函数的核心逻辑与常见陷阱（如边界处理、内存泄漏、iOS兼容性），还厘清了其与requestAnimationFrame的定位差异——前者控频，后者对帧，二者常协同使用，真正落地于吸顶导航、懒加载、视差动画等真实场景。

节流（throttle）到底在防什么？

滚动事件 scroll 在用户拖动或触屏滑动时会高频触发——每秒可能几十次。直接在里面执行 DOM 操作或计算，极易导致页面卡顿、重排频繁、CPU 占用飙升。节流不是“阻止触发”，而是“强制让回调函数按固定间隔最多执行一次”，比如限制为 100ms 内只执行首次或末次调用。

手写一个可靠且带 leading/trailing 控制的 throttle 函数

网上很多简化版节流漏掉关键边界：比如首次是否立即执行（leading）、最后一次滚动停止后是否补发（trailing）。真实场景中两者常需同时支持。以下实现兼顾可读性与健壮性：

function throttle(func, wait, options = {}) {
  let timeout = null;
  let previous = 0;
  const { leading = true, trailing = true } = options;
const later = () => {
previous = leading ? Date.now() : 0;
timeout = null;
if (trailing && timeout === null) {
func();
}
};
const throttled = function(...args) {
const now = Date.now();
if (!previous && !leading) previous = now;
const remaining = wait - (now - previous);
if (remaining <= 0 || remaining > wait) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  previous = now;
  func(...args);
} else if (!timeout) {
  timeout = setTimeout(later, remaining);
}
};
throttled.cancel = () => {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
};
return throttled;
}

使用示例：
– 立即执行首次滚动，后续至少等 16ms（≈60fps）再执行：throttle(handleScroll, 16, { leading: true, trailing: false })
– 更保守：首次不执行，滚动停稳后补一次：throttle(handleScroll, 100, { leading: false, trailing: true })

为什么不用 requestAnimationFrame 替代 throttle？

requestAnimationFrame（raf）确实能将执行对齐到浏览器刷新节奏，但它的触发时机不可控：只要页面没被冻结，它每帧都调用，无法限制“最小间隔”。比如快速滚动 2 秒，raf 可能仍会执行 120 次；而 throttle(..., 100) 最多执行 20 次。二者定位不同：
– raf 适合动画渲染类操作（如视差、滚动位置同步）
– throttle 适合逻辑判断类操作（如吸顶导航切换、懒加载临界点检测）
实际项目中常组合使用：用 throttle 控制入口频率，内部再用 raf 做视觉更新。

监听 scroll 时容易忽略的兼容性细节

滚动容器不一定是 window，可能是某个 div 元素，此时必须监听其 scroll 事件，而非全局；另外 iOS Safari 下，scroll 在弹性滚动结束前不会触发，需配合 touchend + setTimeout 补偿（尤其当 trailing: true 时）。还有两个硬坑：
– 使用 passive: true 时，无法在事件中调用 preventDefault()，但节流函数里通常不涉及此操作，可以放心加
– Vue/React 中绑定事件若未手动 removeEventListener 或清理 throttle 返回的函数，会导致内存泄漏

以上就是《JavaScript节流是什么？如何控制滚动触发频率》的详细内容，更多关于的资料请关注golang学习网公众号！