JavaScript 中节流函数怎么动态切换节流策略-js教程-PHP中文网

节流函数本身不支持动态切换策略，但可通过封装可配置节流器实现在运行时根据条件切换leading/trailing、调整wait或启停节流；核心是将配置抽离为可变状态并暴露updateOptions等方法。

javascript 中节流函数怎么动态切换节流策略

节流函数本身不内置“动态切换策略”的能力，但你可以通过封装一个可配置的节流器，让其在运行时根据条件（比如用户行为、设备类型、网络状态等）切换不同的节流逻辑——比如从 leading 切到 trailing，或调整时间间隔、甚至临时禁用节流。

支持策略切换的节流器设计

核心思路是把节流的配置（如 wait、leading、trailing、是否启用）抽离成可变状态，并暴露更新接口。不是写多个节流函数，而是让一个节流实例能响应式地改变行为。

用闭包保存当前配置和定时器/标记状态
提供 updateOptions({ wait, leading, trailing }) 方法更新策略
每次执行时读取最新配置，而非初始化时固化

示例：可热更新的节流函数

下面是一个支持运行时切换的节流实现：

function createThrottle(func, options = {}) {
  let { wait = 100, leading = true, trailing = false, enabled = true } = options;
  let lastCall = 0;
  let timerId = null;
  let pendingArgs = null;
  let pendingThis = null;
<p>function throttled(...args) {
if (!enabled) {
return func.apply(this, args);
}</p><pre class="brush:php;toolbar:false;">const now = Date.now();
const remaining = wait - (now - lastCall);

if (remaining  wait) {
  if (leading) {
    func.apply(this, args);
  }
  lastCall = now;
  if (timerId) {
    clearTimeout(timerId);
    timerId = null;
  }
  if (trailing && pendingArgs) {
    func.apply(pendingThis, pendingArgs);
    pendingArgs = null;
  }
} else if (!timerId && trailing) {
  pendingArgs = args;
  pendingThis = this;
  timerId = setTimeout(() => {
    func.apply(pendingThis, pendingArgs);
    pendingArgs = null;
    timerId = null;
    lastCall = Date.now();
  }, remaining);
}

}

// ✅ 动态更新策略 throttled.updateOptions = (newOptions) => { ({ wait, leading, trailing, enabled } = { ...options, ...newOptions }); };

// ✅ 临时启用/禁用 throttled.enable = () => { enabled = true; }; throttled.disable = () => { enabled = false; };

return throttled; }

使用方式：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const handleResize = createThrottle(() => {
  console.log('resized');
}, { wait: 200, leading: true });
<p>// 页面缩放时切为防抖式节流（只响应最后一次）
window.addEventListener('resize', handleResize);</p><p>// 某些条件下动态切换
if (isMobile()) {
handleResize.updateOptions({ wait: 300, leading: false, trailing: true });
}</p><p>// 网络慢时加长间隔
if (navigator.connection?.effectiveType === '2g') {
handleResize.updateOptions({ wait: 500 });
}</p>