函数节流是指在一个规定单位时间内,只能有一次触发事件的回调被执行。如果其在单位时间内被触发了多次,只有第一次生效。
使用场景:在 scroll 函数的事件监听上,可以通过事件节流来降低事件调用的频率。
实现逻辑:触发函数时记录一个时间戳,在执行时也记录一个时间戳,将两个时间戳的差值与delay的数值进行比较,判断该回调函数是否应该执行
function throttle(fn, delay) {
let curTime = Date.now(); // 记录触发函数的时间
return function () {
let nowTime = Date.now();
if (nowTime - curTime >= delay) {
// 记录执行函数和触发函数的时间差是否在delay范围内
curTime = Date.now(); // 注意每执行完一次函数,重新初始化curTime
fn.apply(this, arguments);
}
};
}
function test(name) {
console.log('name is ', name);
}
let func = throttle(test, 2000);
setInterval(() => {
func('kerwin');
}, 500);
上述示例中,每隔500毫秒触发一次test函数,但实际每2秒才执行一次