时间戳实现节流的核心是记录并比较上次执行时间,满足间隔才执行并更新时间戳;其特点是首次立即执行、无定时器、不保证末次触发执行,适用于滚动等对末次不敏感的场景。

节流函数用时间戳实现,核心是记录上一次成功执行的时间,每次触发时对比当前时间与上次执行时间的差值,超过设定间隔才允许执行,并更新时间戳。
原理:用 now - lastTime >= delay 控制执行频率
节流的关键在于“固定时间间隔内最多执行一次”。时间戳方案不依赖定时器,而是靠每次触发时检查:
当前时间减去上次执行时间是否 ≥ 延迟毫秒数。满足则执行函数并更新 lastTime;否则跳过。
- lastTime 初始化为 0 或 Date.now(),代表“尚未执行过”
- 每次调用节流函数时,先取
Date.now()得到当前时间戳 - 若
now - lastTime >= delay,就立即执行原函数,并把lastTime更新为now - 不满足条件时,什么也不做(不设定时器、不排队)——这是“时间戳版节流”的典型特征
基础实现示例
一个简洁可用的版本:
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
使用方式:
- 绑定在 scroll、resize 等高频事件上,如
window.addEventListener('scroll', throttle(handleScroll, 100)) - 注意:该版本是“首次立即执行”,因为初始
lastTime === 0,第一次now - 0必然 ≥ delay - 若需“首次等待 delay 后再执行”,可将
lastTime初始化为Date.now() - delay
常见误区与注意事项
时间戳节流看似简单,但容易忽略细节:
- 不要用
new Date().getTime()替代Date.now()—— 后者更轻量、无对象创建开销 - 避免在闭包外修改
lastTime,否则多个节流实例会互相干扰(应确保每个 throttle 返回的函数有独立的 lastTime) - 不处理 this 和参数丢失问题?记得用
func.apply(this, args)或箭头函数 + 展开运算符保持上下文 - 时间戳方案无法保证最后一次触发一定被执行(和定时器节流不同),适合对“最后一下”不敏感的场景,如滚动位置采样
扩展:支持配置首次是否立即执行
可通过选项控制行为,让逻辑更灵活:
function throttle(func, delay, options = {}) {
const { leading = true, trailing = false } = options;
let lastTime = 0;
let timer = null;
<p>const throttled = function(...args) {
const now = Date.now();
if (leading && now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
// trailing 模式需配合定时器,此处略 —— 时间戳本身不天然支持尾部执行
};</p><p>return throttled;
}</p>
说明:
纯时间戳方案天然支持 leading: true(默认立即执行),但要支持 trailing(保证最后一次触发被执行),就必须引入定时器配合,已超出纯时间戳范畴。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











