JavaScript 节流函数怎么实现带有尾部调用功能的节流控制-js教程-PHP中文网

节流函数的尾部调用确保最后一次操作不被遗漏，即在等待时间结束后补执行最后一次触发；其实现需记录上次执行时间、缓存最后一次参数，并动态重置定时器指向“末次触发后wait毫秒”。

javascript 节流函数怎么实现带有尾部调用功能的节流控制

节流函数（Throttle）的核心是限制函数在指定时间间隔内最多执行一次。带“尾部调用”（trailing call）的节流，是指：即使触发频繁，在最后一次触发后，若已过等待时间，仍会执行一次——确保**最后的操作不被遗漏**。

为什么需要尾部调用？

普通节流（仅 leading）会在首次触发时立即执行，之后在 wait 时间内忽略所有调用，直到时间窗口结束才恢复。但这样可能导致用户最后一次操作（比如拖拽结束、滚动到底部）完全没响应。尾部调用就是在 wait 期结束后，补上最后一次未执行的调用，提升交互完整性。

关键实现逻辑

要支持尾部调用，需记录：

上次执行的时间戳（用于判断是否该执行）
是否在 wait 期间有新触发（即“有待执行的最后一次调用”）
用定时器控制 wait 结束后的尾部执行

不能只靠 `setTimeout` 单次延时，而要动态管理：每次触发都重置定时器，保证它始终指向“最后一次触发之后 wait 毫秒”这个时刻。

完整可运行实现

注意：以下实现同时支持 leading（首次立即执行）和 trailing（末次补执行），可通过选项开关

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

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  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 才触发，体验延迟</p>

✅ 正确行为：第一次滚动立刻执行；中间高频滚动被抑制；停止后 200ms 内若无新滚动，则执行最后一次缓存的调用。