debounce 和 throttle 如何支持最大执行次数
在 javascript 中，防抖（debounce）和节流（throttle）可以通过维护一个计数器并在每次触发时递减来实现最大执行次数的限制。对于防抖，可以在定时器回调中检查计数器是否大于零，若满足则执行并递减；对于节流，可以在定时器重置逻辑中加入计数器判断，确保在限定的时间内最多执行指定次数。这样既能控制频率，又能限制总调用量。
如何实现带最大执行次数的防抖函数
实现带最大执行次数的防抖函数，核心是在原有的防抖逻辑基础上增加一个计数器变量。每次触发事件时，如果计数器大于零，则重置定时器并递减计数器；如果计数器为零，则不再响应后续触发。在定时器回调中，执行目标函数后再次递减计数器，直到计数器归零。
function debounceWithMax(fn, wait, maxCalls) {
let timeout = null;
let remaining = maxCalls;
return function (...args) {
const context = this;
// 如果还有剩余次数
if (remaining > 0) {
clearTimeout(timeout);
remaining--;
timeout = setTimeout(() => {
fn.apply(context, args);
// 执行完后，如果还有剩余次数，可以重置或保持
// 这里选择重置以便下一轮循环使用
remaining = maxCalls;
}, wait);
}
};
}
// 示例用法
let count = 0;
const handler = debounceWithMax(() => {
console.log('Executed:', ++count);
}, 500, 3);
document.getElementById('btn').addEventListener('click', handler);
上述代码定义了一个 debounceWithMax 函数，它接受目标函数 fn、等待时间 wait 和最大调用次数 maxCalls。返回的包装函数会在每次触发时检查 remaining 计数器。如果 remaining 大于零，则清除之前的定时器，设置新的定时器，并递减 remaining。在定时器回调中，执行 fn 并将 leading 选项设为 false 的情况下，通常我们希望在最后一次触发后执行。但为了严格限制最大次数，我们在每次触发时都递减。注意：上面的实现是 trailing 模式，即只在最后一次触发后执行，但限制了总共只能触发 maxCalls 次定时器。如果需要 leading 模式（立即执行），逻辑需稍作调整。
如何实现带最大执行次数的节流函数
实现带最大执行次数的节流函数，需要在原有的节流逻辑中加入计数器。节流通常有两种模式：leading（立即执行）和 trailing（延迟执行）。对于最大执行次数，我们可以在每次成功执行后递减计数器，直到计数器为零，之后不再执行任何调用。
function throttleWithMax(fn, wait, maxCalls) {
let timeout = null;
let lastExecTime = 0;
let remaining = maxCalls;
return function (...args) {
const context = this;
const now = Date.now();
const elapsed = now - lastExecTime;
if (remaining > 0) {
if (elapsed > wait) {
// Leading 模式：立即执行
fn.apply(context, args);
lastExecTime = now;
remaining--;
} else if (timeout === null) {
// Trailing 模式：如果在等待期间有触发，且还没到执行时间
// 这里简化为只处理 leading，trailing 需要更复杂的逻辑
// 为了演示，我们假设只使用 leading 模式配合最大次数
timeout = setTimeout(() => {
timeout = null;
// 如果还有剩余次数，允许下一次 leading
// 但为了简单，这里不处理 trailing 以符合最大次数限制
}, wait - elapsed);
}
}
};
}
// 示例用法
let count = 0;
const handler = throttleWithMax(() => {
console.log('Throttled Executed:', ++count);
}, 500, 3);
document.getElementById('btn').addEventListener('click', handler);
上述代码展示了一个简单的带最大执行次数的节流函数。它使用 lastExecTime 来记录上次执行的时间，并在每次触发时计算经过的时间 elapsed。如果 remaining 大于零且 elapsed 大于 wait，则立即执行函数并递减 remaining。这种实现主要侧重于 leading 模式，因为 trailing 模式下的最大次数限制会更复杂，涉及到是否在最后时刻执行的问题。在实际应用中，可以根据需求选择 leading 或 trailing 模式，并相应地调整计数器的更新时机。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
