节流函数典型场景包括scroll、resize、mousemove事件及Canvas动画同步；手写需支持leading立即执行和trailing结尾补发，核心是时间戳判断与定时器精准清理。
节流（throttle）是控制函数执行频率的常用手段，核心作用是「保证函数至少间隔一定时间才执行一次」。它和防抖（debounce）不同：节流不等待用户停止操作，而是固定节奏放行，适合处理 scroll、resize、mousemove 等高频事件。
节流的典型使用场景有哪些？
常见于需要响应但不能太频繁的操作：
- 滚动时计算可视区域元素（
scroll事件） - 窗口缩放时重排布局（
resize事件） - 鼠标移动轨迹采样（
mousemove事件） - Canvas 动画帧同步（避免超频绘制）
注意：如果目标是「等用户停下来再执行」，比如搜索框输入联想，该用防抖；节流更适合「匀速响应」类需求。
如何手写一个带 leading 和 trailing 控制的节流函数？
标准节流需支持三种行为：立即执行（leading）、结尾补发（trailing）、或两者都不启用。关键在于用时间戳判断是否过了冷却期，并缓存最后一次调用的参数。
立即学习“Java免费学习笔记（深入）”；
以下是带完整控制逻辑的实现：
function throttle(func, delay, options = {}) {
let lastTime = 0;
let timerId = null;
const { leading = true, trailing = false } = options;
<p>return function throttled(...args) {
const now = Date.now();</p><pre class='brush:php;toolbar:false;'>if (!leading && !lastTime) {
lastTime = now;
}
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
} else if (trailing && !timerId) {
timerId = setTimeout(() => {
func.apply(this, args);
lastTime = Date.now();
timerId = null;
}, delay - (now - lastTime));
}}; }
说明：
-
leading: true→ 第一次调用立刻执行（默认） -
trailing: true→ 最后一次调用会在 delay 后补发（需配合 clearTimeout 防重复） - 不传
options时等价于{ leading: true, trailing: false } - 避免用
setTimeout单纯计时替代时间戳判断，否则在快速连续触发下会失准
为什么不能直接用 setInterval 模拟节流？
看似简单，但有严重缺陷：
-
setInterval是固定节奏轮询，无法感知真实调用时机，可能漏掉中间参数或上下文 - 无法区分「用户刚触发」和「还在冷却中」，容易丢失关键调用（如 resize 的最终尺寸）
- 手动清理
clearInterval易出错，且无法与调用方生命周期对齐 - 在页面非激活状态（tab 切走）时，
setInterval可能被节流甚至暂停，导致行为不一致
所以节流函数必须基于每次调用的时间戳做决策，而不是依赖定时器驱动。
真正难的是 trailing 补发逻辑的时机计算和 timer 清理边界——很多人漏掉 clearTimeout 或算错剩余延迟，导致重复执行或漏执行。动手前先想清楚：你要的是「稳态节奏」还是「首尾兼顾」。
