写项目时会用到监听scroll滚动条滚动事件 。这个事件触发的很频繁,当监听器的回调函数越多越复杂,对性能影响越来越严重。我们可以利用定时器,让事件的回调函数在监听中按指定的时间间隔触发,而不是每像素移动都触发。
function throttle(fn,delay){
// 记录上一次函数触发的时间以及定义一个定时器
var lastTime,timer;
// 延迟多长时间
var delay = delay || 200;
return function() {
var args = arguments;
// 记录当前函数触发的时间
var nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(function () {
// 记录上一次函数触发的时间
lastTime = nowTime;
// 修正this指向问题
fn.apply(this, args);
}, delay);
}else{
lastTime = nowTime;
fn.apply(this, args);
}
}
}
其实原理就是用时间戳判断是否到了回调的执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调里边判断当前时间戳距离上一次执行时间戳的间隔是否已经到达规定的时间,如果是就执行,并且会更新上次执行的时间戳。