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;
}
};
}定时器实现方式
通过定时器延迟执行函数。若定时器存在则跳过执行，否则设置定时器并在执行后清除。
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);
lastTime = Date.now();
timer = null;
}, remaining);
}
};
}使用场景示例
滚动事件节流，避免频繁触发回调。
window.addEventListener('scroll', throttle(() => {
console.log('Scroll event throttled');
}, 200));注意事项
- 时间间隔（
delay）需根据实际场景调整，过短可能无法有效节流，过长可能导致响应延迟。 - 确保函数执行时的上下文（
this）和参数正确传递。 - 对于需要取消节流的场景，可扩展实现返回取消函数。
