JavaScript 防抖与节流中怎么编写带有尾随执行的节流函数-js教程-PHP中文网

节流函数的“尾随执行”指触发停止后补调最后一次未执行的调用，避免遗漏操作终态；其实现需记录上次时间、维护定时器并在间隔后兜底执行，支持leading、trailing及flush/cancel。

javascript 防抖与节流中怎么编写带有尾随执行的节流函数

节流函数的“尾随执行”是指：在触发停止后，如果最后一次触发未被执行，则补上一次调用。这能避免因节流间隔过长导致用户操作（如滚动、鼠标移动）结束时的最后状态被遗漏。

核心思路：记录上次触发时间 + 延迟执行最后一次

标准节流只控制“固定间隔内最多执行一次”，但不保证最后一次一定执行。要支持尾随（trailing），需额外维护一个定时器，在每次触发时清除旧的，并在间隔后尝试执行；同时，在停止触发后，再设一个延迟来兜底执行最后一次。

带尾随执行的节流函数实现

以下是一个可直接使用的版本，支持 leading（首次立即执行）、trailing（末次补执行）及取消功能：

function throttle(func, delay, options = {}) {
  const { leading = true, trailing = true } = options;
  let lastExecTime = 0;
  let timer = null;
  let lastArgs = null;
  let lastThis = null;
<p>function execute() {
if (!lastArgs) return;
func.apply(lastThis, lastArgs);
lastArgs = null;
lastThis = null;
}</p><p>function throttled(...args) {
const now = Date.now();
const remaining = delay - (now - lastExecTime);</p><pre class="brush:php;toolbar:false;">lastArgs = args;
lastThis = this;

if (remaining  delay) {
  // 可执行：要么已超时，要么时钟回拨
  if (leading) {
    func.apply(this, args);
    lastExecTime = now;
  } else if (trailing) {
    // 非 leading 模式下，先记下，等后续 flush
    clearTimeout(timer);
    timer = setTimeout(execute, delay);
  }
} else if (trailing && !timer) {
  // 还没到时间，但需要尾随 → 设一个延迟执行最后一次
  timer = setTimeout(execute, remaining);
}

}

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

// 手动触发剩余调用（例如解绑事件前） throttled.flush = () => { if (timer) { clearTimeout(timer); timer = null; } execute(); };

// 取消所有待执行（清空状态） throttled.cancel = () => { if (timer) { clearTimeout(timer); timer = null; } lastArgs = null; };

return throttled; }

使用示例与说明

比如监听窗口大小变化，希望既不频繁响应，又不错过最终尺寸：

启用 trailing：确保 resize 结束后仍执行一次
搭配 flush：在页面卸载前手动补调用，避免状态丢失
注意 this 和参数传递：内部正确保存了上下文与实参

调用方式：

const handleResize = throttle(() => {
  console.log('窗口尺寸更新', window.innerWidth, window.innerHeight);
}, 200, { leading: false, trailing: true });
<p>window.addEventListener('resize', handleResize);</p><p>// 卸载前（如 React useEffect cleanup）
// handleResize.flush(); // 确保最后一次生效
</p>