时间戳节流函数首次立即执行,核心是用Date.now()记录并比较时间差,满足延迟即执行并更新时间戳;previous初值为0确保首次必然触发,不依赖定时器,轻量且无异步延迟。

节流函数使用时间戳实现“首次立即执行”,核心思路是:记录上一次执行的时间戳,每次触发时对比当前时间与上次执行时间的差值,若超过设定延迟,则立即执行并更新时间戳;否则不执行。关键在于第一次调用时不等待,直接运行。
时间戳节流的基本逻辑
与定时器节流(如使用 setTimeout)不同,时间戳节流完全依赖系统时间判断。它不设防抖等待窗口,也不启动异步任务,因此天然支持首次立即触发。
- 初始化一个变量(如 previous = 0)记录上一次成功执行的时间戳
- 每次调用函数时,获取当前时间戳(Date.now() 或 +new Date())
- 若当前时间减去 previous ≥ 延迟时间(delay),则执行原函数,并更新 previous = now
- 否则跳过,不执行也不延后
实现代码(带首次立即执行)
以下是简洁可靠的实现:
function throttle(func, delay) {
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous >= delay) {
func.apply(this, args);
previous = now;
}
};
}✅ 特点:第一次调用时 previous === 0,而 now > 0,必然满足 now - previous >= delay(只要 delay 是正常正数),所以立刻执行。
立即学习“Java免费学习笔记(深入)”;
注意事项与常见误区
这个实现看似简单,但有几个细节容易出错:
- 不要用 new Date().getTime() 替代 Date.now()——虽然等价,但 Date.now() 更轻量、无实例开销
- delay 必须是正整数,若为 0 或负数会导致每次都被执行(失去节流意义)
- 不处理 this 绑定或参数透传会失效——上面示例用了 func.apply(this, args) 确保上下文和参数正确
- 该版本不支持取消或重置,如需手动控制,可额外暴露清除方法(如返回对象包含 cancel)
对比定时器节流(为何它默认不立即执行)
基于 setTimeout 的节流通常先设个计时器,等延迟结束后再执行,且会忽略中间多次触发。它的首次执行要等到第一个 delay 后,无法做到“立即”。而时间戳方式无延迟启动,天然契合“首次立刻、后续按间隔执行”的需求,更适合按钮点击、滚动监听等需要快速响应首动的场景。


















