要实现防抖或节流在首次调用时立即执行，核心在于将触发逻辑前置到定时器设置之前。对于防抖，只需在函数入口处直接执行一次原函数，随后再启动延时器重置计时；对于节流，则通过记录上次执行时间戳，判断当前时间与上次时间的差值是否超过阈值，若满足条件则立即执行并更新时间戳，否则仅更新等待状态。这样既保证了首次响应的即时性，又避免了后续短时间内的高频重复调用。
防抖函数如何实现首次立即执行
在常见的防抖场景中，我们通常希望用户停止操作后才触发事件，但有时也需要在第一次点击时就立刻响应。实现这一点的做法是在封装的 debounce 函数内部，先判断是否需要立即执行。如果需要，则在清除旧定时器之前，先调用一次原始函数 func，然后再设置新的定时器。如果不需要立即执行（即普通的防抖），则只清除定时器并重新计时。这种模式特别适用于搜索框输入，用户敲下第一个字符时立即发起请求，之后每次按键都重置倒计时。
function debounce(func, wait, immediate = false) {
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 为 true 时，首次调用会立即打印 "Immediate"，随后的快速连续调用不会触发，直到停止操作超过 wait 毫秒后，下一次调用才会再次立即触发。预期输出为：首次点击控制台输出 "Immediate"，后续快速点击无输出，间隔几秒后再次点击输出 "Immediate"。
立即学习“Java免费学习笔记（深入）”；
节流函数如何实现首次立即执行
节流的目的是保证一定时间内只执行一次。要实现首次立即执行，关键在于使用时间戳方案而非定时器方案。在封装的 throttle 函数中，记录 lastTime 变量。每次触发时，计算当前时间 now 与 lastTime 的差值。如果差值大于设定的 wait 时间，或者 lastTime 尚未初始化（即首次调用），则立即执行原函数 func 并更新 lastTime 为当前时间。否则，忽略本次调用。这种方式能确保第一次点击瞬间响应，之后在时间窗口内被拦截。
function throttle(func, wait) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime > wait || !lastTime) {
func.apply(this, args);
lastTime = now;
}
};
}
结合上面的防抖代码，我们可以测试一个完整的场景。假设有一个按钮绑定了一个同时具备防抖和节流特性的复杂处理函数，或者分别测试。这里单独测试节流：首次点击立即输出 "Throttled"，在 1000ms 内的后续点击均不输出，1000ms 后再次点击立即输出 "Throttled"。预期输出符合上述描述，验证了时间戳方案在首次执行上的有效性。
基于立即执行标志位的参数传递问题
在实现了首次立即执行后，开发者常遇到的问题是：如果在首次执行时传入了特定参数，这些参数是否能正确传递给原始函数？答案是肯定的，只要在使用 apply 或 call 时正确传递了 args 数组。但在某些自定义实现中，如果为了优化性能而在首次执行后清除了上下文或参数引用，可能会导致后续逻辑异常。例如，在防抖的立即执行模式中，如果错误地在 callNow 为真时没有保留 timeout 的设置逻辑，或者在 throttle 中错误地重置了 lastTime 但未执行函数，都会导致行为偏离预期。因此，必须确保在分支判断中，无论是立即执行还是延迟执行，参数的传递路径是一致的。以上提供的代码片段均严格遵循 func.apply(context, args) 的模式，确保了参数 args 从闭包作用域无损传递到目标函数。
