防抖函数
主要要来防止频繁调用某一事件的回调,其规定在某一延迟内,如果继续有事件触发,则计时器重新开始计时
var debounce = function(cb,delay) {
var timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
cb();
},delay);
}
}
var foo = function() {
console.log('scroll');
}
document.querySelector('.wrap').addEventListener('scroll', debounce(foo, 2000));
节流函数
节流函数类似防抖函数,也是用来解决事件的频繁触发,不过其能保证在事件发生后,在规定延迟后至少会执行一次
var throttle = function(cb, delay) {
var timer = null;
return function() {
if(!timer) {
timer = setTimeout(function() {
cb();
timer = null;
},delay);
}
}
}
document.querySelector('.wrap').addEventListener('scroll', throttle(foo, 2000));