JavaScript 中节流函数怎么封装成可配参数的组件-js教程-PHP中文网

节流函数应封装为可配参数的组件，支持wait（执行间隔）、leading（首次是否立即执行）等选项，常用时间戳+开关模式实现；增强版还可支持trailing（末次补执行）和cancel方法；健壮封装需正确处理this、arguments及promise返回值。

javascript 中节流函数怎么封装成可配参数的组件

节流函数封装成可配参数的组件，核心是让调用者能灵活控制执行间隔、是否立即执行、以及函数上下文和参数传递。不是只写一个固定逻辑，而是提供明确选项，适应不同业务场景。

支持 wait 和 leading 参数的节流封装

最常用的是时间戳 + 开关模式：用上次执行时间判断是否该执行，再配合 leading（首次是否立即执行）控制行为。

wait：必填，毫秒数，表示最小执行间隔
leading：布尔值，默认 false；设为 true 时，第一次触发立刻执行，后续按间隔执行

示例实现：

function throttle(fn, wait, leading = false) {
  let lastTime = 0;
  let timer = null;
<p>return function(...args) {
const now = Date.now();</p><pre class="brush:php;toolbar:false;">if (leading && !lastTime) {
  fn.apply(this, args);
  lastTime = now;
  return;
}

if (now - lastTime >= wait) {
  fn.apply(this, args);
  lastTime = now;
} else if (!timer && !leading) {
  timer = setTimeout(() => {
    fn.apply(this, args);
    lastTime = Date.now();
    timer = null;
  }, wait - (now - lastTime));
}

}; }

支持 trailing 和 cancel 方法的增强版

有些场景需要取消待执行的节流（比如组件卸载），或确保最后一次触发也执行（trailing）。这时可返回带方法的对象：

返回函数本身，同时挂载 cancel 方法清空定时器
trailing：设为 true 时，在 wait 结束后补一次执行（即使中间没再触发）

示例：

OpenJDK 24

下载

function throttle(fn, wait, options = {}) {
  const { leading = false, trailing = false } = options;
  let lastTime = 0;
  let timer = null;
<p>const throttled = function(...args) {
const now = Date.now();</p><pre class="brush:php;toolbar:false;">if (leading && !lastTime) {
  fn.apply(this, args);
  lastTime = now;
  return;
}

if (now - lastTime >= wait) {
  fn.apply(this, args);
  lastTime = now;
} else if (!timer && !leading) {
  timer = setTimeout(() => {
    if (trailing) fn.apply(this, args);
    lastTime = Date.now();
    timer = null;
  }, wait - (now - lastTime));
}

};

throttled.cancel = () => { if (timer) { clearTimeout(timer); timer = null; } };

return throttled; }

兼容 this、arguments 和 Promise 的健壮封装

实际项目中，fn 可能是箭头函数、需要绑定 this，或返回 Promise。封装时需注意：

用 ...args 接收全部参数，避免 arguments 对象丢失
用 fn.apply(this, args) 保证上下文正确
如需链式调用或 await，可在执行后返回 fn 的返回值（但注意节流本身不改变返回语义）

推荐写法（简洁实用）：

function throttle(fn, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      lastTime = now;
      return fn.apply(this, args);
    }
  };
}

这个版本轻量、无副作用、this 和参数都可靠，适合大多数按钮点击、滚动监听等场景。