防抖函数增加最大等待时间限制需用两个独立定时器：延迟执行定时器响应用户停手，最大等待定时器首次触发即启动、超时强制执行并清理自身与延迟定时器。
防抖函数增加最大等待时间限制，本质是给“等用户停手”加一道保险：即使用户一直操作，函数也必须在指定最长时间后执行一次。这避免了用户持续触发导致回调永远不执行的问题。
核心思路：同时维护两个定时器
标准防抖只用一个定时器来清除和重设；加最大等待时间后，需要两个独立定时器：
- 延迟执行定时器：常规防抖逻辑，每次触发就清除并重设，用于响应“用户终于停手”
- 最大等待定时器：首次触发时启动，且只启动一次，到时间就强制执行并清理自身和延迟定时器
实现示例（带 maxWait 参数）
以下是一个简洁可靠的实现：
function debounce(func, wait, maxWait) {
let timeoutId = null;
let maxTimeoutId = null;
let lastArgs = [];
let lastThis = null;
let lastCallTime = 0;
function invokeFunc() {
const result = func.apply(lastThis, lastArgs);
lastArgs = [];
lastThis = null;
return result;
}
function startMaxTimer() {
if (maxTimeoutId === null && typeof maxWait === 'number') {
maxTimeoutId = setTimeout(() => {
if (timeoutId !== null) {
clearTimeout(timeoutId);
timeoutId = null;
}
invokeFunc();
maxTimeoutId = null;
}, maxWait);
}
}
function cancel() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
timeoutId = null;
}
if (maxTimeoutId !== null) {
clearTimeout(maxTimeoutId);
maxTimeoutId = null;
}
}
function debounced(...args) {
const now = Date.now();
lastArgs = args;
lastThis = this;
// 首次触发时启动 maxWait 定时器
if (maxTimeoutId === null) {
startMaxTimer();
}
// 清除并重设常规延迟定时器
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
timeoutId = null;
invokeFunc();
}, wait);
}
debounced.cancel = cancel;
return debounced;
}
使用方式与注意事项
- 调用时传入第三个参数 maxWait（单位毫秒），例如：
debounce(search, 300, 2000)表示“最多等 2 秒，不管用户是否还在输” - maxWait 必须 ≥ wait，否则逻辑冲突（比如 wait=500 但 maxWait=300，会导致刚设好 maxWait 就立刻执行）
- 支持手动
debounced.cancel()清理所有定时器，防止内存泄漏或意外执行 - 若需立即执行首次调用（leading edge），需额外扩展逻辑；上述版本为标准 trailing 模式（在停止后执行）
为什么不能只靠 clearTimeout + setTimeout 拼凑？
常见误区是试图在一个定时器里“动态调整延时”，但 JavaScript 的定时器无法修改已设定的 delay。必须用两个独立定时器分工：一个管“等静默”，一个管“保底执行”。两者互不干扰，但 cancel 时需同步清理。
立即学习“Java免费学习笔记（深入）”；
