js节流实现
节流的概念
节流（Throttle）是一种限制函数执行频率的技术，确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。
基础实现方法
使用时间戳判断是否执行函数：
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}定时器实现方法
使用setTimeout控制执行间隔：
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}结合时间戳和定时器
实现首次立即执行和尾调用保证：
function throttle(func, delay) {
let lastTime = 0;
let timer = null;
return function(...args) {
const now = Date.now();
const remaining = delay - (now - lastTime);
if (remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
func.apply(this, args);
lastTime = now;
} else if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
lastTime = Date.now();
}, remaining);
}
};
}使用场景示例
窗口滚动事件处理：
window.addEventListener('scroll', throttle(() => {
console.log('处理滚动事件');
}, 200));注意事项
- 时间间隔delay需要根据实际场景调整
- 注意this绑定问题，使用箭头函数或apply/call确保上下文正确
- 节流函数返回的新函数需要保持引用才能正确工作
