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);
lastTime = Date.now();
timer = null;
}, remaining);
}
};
}使用场景示例
滚动事件节流处理：
window.addEventListener('scroll', throttle(() => {
console.log('Scroll event throttled');
}, 300));注意事项
- 节流时间间隔需根据实际需求调整，过短可能失去效果，过长可能影响交互体验。
- 在组件销毁时需清除定时器，避免内存泄漏。
- 若需立即执行首次调用，可在实现中添加标志位控制。
