JavaScript 函数节流(throttle)是一种优化手段,用于限制某个函数在指定时间间隔内只能执行一次。这在处理高频触发事件(如滚动、窗口大小调整等)时非常有用,可以提高性能。
以下是一个简单的 JavaScript 函数节流实现:
function throttle(func, delay) {
let lastCall = 0; // 上次调用的时间戳
let timer = null; // 定时器
return function (...args) {
const now = Date.now(); // 当前时间戳
if (now - lastCall >= delay) {
// 如果距离上次调用已经超过指定的时间间隔,则立即执行函数
lastCall = now;
func.apply(this, args);
} else if (!timer) {
// 如果距离上次调用还未超过指定的时间间隔,则设置一个定时器,在指定时间间隔后执行函数
timer = setTimeout(() => {
lastCall = Date.now();
func.apply(this, args);
timer = null;
}, delay - (now - lastCall));
}
};
}
使用示例:
function onScroll() {
console.log('滚动事件触发');
}
const throttledOnScroll = throttle(onScroll, 200);
window.addEventListener('scroll', throttledOnScroll);
在这个示例中,onScroll
函数会在滚动事件触发时被节流,确保在 200 毫秒内最多执行一次。