节流函数的尾部调用确保最后一次操作不被遗漏，即在等待时间结束后补执行最后一次触发；其实现需记录上次执行时间、缓存最后一次参数，并动态重置定时器指向“末次触发后wait毫秒”。
节流函数（Throttle）的核心是限制函数在指定时间间隔内最多执行一次。带“尾部调用”（trailing call）的节流，是指：即使触发频繁，在最后一次触发后，若已过等待时间，仍会执行一次——确保**最后的操作不被遗漏**。
为什么需要尾部调用？
普通节流（仅 leading）会在首次触发时立即执行，之后在 wait 时间内忽略所有调用，直到时间窗口结束才恢复。但这样可能导致用户最后一次操作（比如拖拽结束、滚动到底部）完全没响应。尾部调用就是在 wait 期结束后，补上最后一次未执行的调用，提升交互完整性。
关键实现逻辑
要支持尾部调用，需记录：
- 上次执行的时间戳（用于判断是否该执行）
- 是否在 wait 期间有新触发（即“有待执行的最后一次调用”）
- 用定时器控制 wait 结束后的尾部执行
不能只靠 `setTimeout` 单次延时，而要动态管理：每次触发都重置定时器，保证它始终指向“最后一次触发之后 wait 毫秒”这个时刻。
立即学习“Java免费学习笔记（深入）”；
完整可运行实现
注意：以下实现同时支持 leading（首次立即执行）和 trailing（末次补执行），可通过选项开关
function throttle(func, wait, options = {}) {
const { leading = true, trailing = true } = options;
let lastTime = 0; // 上次真正执行的时间
let timerId = null;
let lastArgs = null;
let lastThis = null;
<p>function invokeFunc() {
func.apply(lastThis, lastArgs);
lastTime = Date.now();
lastArgs = lastThis = null;
}</p><p>function throttled(...args) {
const now = Date.now();
const remaining = wait - (now - lastTime);</p><pre class="brush:php;toolbar:false;">lastArgs = args;
lastThis = this;
if (remaining <= 0 || remaining > wait) {
// 可以立即执行（首次 or 超时太久）
if (timerId !== null) {
clearTimeout(timerId);
timerId = null;
}
if (leading) {
invokeFunc();
} else {
lastTime = now;
}
} else if (timerId === null && trailing) {
// 还没设定时器，且允许尾部调用 → 设一个，等 remaining 后执行最后一次
timerId = setTimeout(() => {
timerId = null;
invokeFunc();
}, remaining);
}}
// 提供手动清空能力（便于测试或清理） throttled.cancel = () => { if (timerId !== null) { clearTimeout(timerId); timerId = null; lastArgs = lastThis = null; } };
return throttled; }
使用示例与对比
假设监听窗口滚动：
// 每 200ms 最多执行一次，且保证最后一次滚动停稳后还会执行一次
window.addEventListener('scroll', throttle(() => {
console.log('scrolling...', Date.now());
}, 200, { leading: true, trailing: true }));
<p>// 对比：仅 leading → 最后一次快速滚动可能完全不触发
// 对比：仅 trailing → 首次滚动要等 200ms 才触发，体验延迟✅ 正确行为：第一次滚动立刻执行；中间高频滚动被抑制；停止后 200ms 内若无新滚动，则执行最后一次缓存的调用。
