javascript 防抖与节流本身不直接支持刷新定时器，因为它们的实现逻辑是重置或忽略中间调用。要实现类似“刷新”的效果，即每次触发都重新计算等待时间并立即执行一次，需要修改底层逻辑，通常通过引入一个 `leading` 选项来实现。在防抖中，这被称为“前缘防抖”，它会立即执行函数，然后启动新的计时器；在节流中，这表现为在固定间隔内持续执行。核心做法是在封装函数时增加一个参数来控制行为，并在内部判断是否应该立即执行。
如何实现前缘防抖以支持立即执行
前缘防抖（Leading Debounce）会在第一次触发时立即执行函数，之后在设定的时间内再次触发会重置计时器，直到最后一次触发后的等待期结束。这与默认的后缘防抖（Trailing Debounce）不同，后者是在最后一次触发后等待一段时间才执行。实现的关键在于使用 `setTimeout` 和 `clearTimeout`，并在调用 `func.apply` 后立即重置定时器。
function debounce(func, wait, immediate) {
let timeout;
return function(...args) {
const context = this;
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
}
};
}
在上述代码中，`immediate` 参数决定了是否启用前缘模式。当 `immediate` 为 `true` 时，如果当前没有正在进行的定时器（`!timeout`），则立即执行函数，并设置一个新的定时器来清除标志位。这种机制允许在高频触发场景下，如窗口调整或搜索输入，实现“首次立即响应，后续静默”的效果。
如何结合节流实现持续执行
节流（Throttle）确保函数在指定的时间间隔内最多执行一次。如果需要支持“刷新”效果，即在等待期间也能触发执行，可以通过修改节流的实现，使其在每次触发时检查是否超过了上次执行的时间。如果超过，则立即执行并更新最后执行时间；否则，可以设置一个定时器在未来的某个时间点执行。这种变体有时被称为“间隔执行”或“持续节流”。
function throttle(func, wait) {
let timeout, lastExecTime;
return function(...args) {
const context = this;
const now = Date.now();
const remaining = wait - (now - lastExecTime);
if (remaining {
lastExecTime = Date.now();
timeout = null;
func.apply(context, args);
}, remaining);
}
};
}
这个节流函数通过比较当前时间与上次执行时间的差值来决定是否立即执行。如果剩余时间小于等于零，说明已经过了等待期，立即执行并重置计时器。否则，设置一个定时器在剩余时间后执行。这种方式确保了在高频触发时，函数能够以更接近实时的频率执行，而不是仅仅在间隔结束时执行一次。
基于 immediate 参数的具体行为差异
在使用上述 `debounce` 函数时，`immediate` 参数的取值直接影响了函数的执行时机。当 `immediate` 为 `false`（默认值）时，函数会在最后一次触发后的 `wait` 毫秒后执行。例如，如果用户快速输入多个字符，只有当用户停止输入超过 `wait` 毫秒后，搜索请求才会发送。而当 `immediate` 为 `true` 时，函数会在第一次触发时立即执行，之后的触发会重置计时器，但不会立即执行，直到最后一次触发后的 `wait` 毫秒后才会再次执行。这意味着在快速输入过程中，只有第一个字符会触发搜索，后续的输入会被忽略，直到用户停止输入并等待 `wait` 毫秒后，最后一个字符才会触发搜索。这种差异在处理实时搜索或窗口调整等场景时至关重要，开发者需要根据具体需求选择合适的模式。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
