JS防抖与节流函数封装
防抖
在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况
防抖的事件处理机制仅触发一次且必须是结束状态下才会执行
function debounce(callback, delay, immediate) {
let timer = null;
return function() {
const context = this,
args = arguments;
timer && clearTimeout(timer);
immediate && !timer && callback.apply(context, args); // 首次立即触发
timer = setTimeout(function() {
callback.apply(context, args);
}, delay);
}
}
window.addEventListener('scroll',
debounce(function() {
console.log(document.documentElement.scrollTop);
}, 300)
);
节流
防抖有个明显的缺点就是它在事件运行的过程中不能够执行事件,比如图片的懒加载就不能够满足,当滚动了很多但是由于没有停止导致图片仍然不会加载出来
节流的事件处理机制是在一定时间内无法重复调事件
function throttle(callback, delay) { // 定时器版
let timer = null;
return function() {
const context = this,
args = arguments;
if(!timer) {
timer = setTimeout(function() {
timer = null;
callback.apply(context, args);
}, delay);
}
};
}
function throttle(callback, delay) { // 时间戳版
let start = 0;
return function() {
const now = Date.now();
if(now - start > delay) {
start = now;
callback.apply(this, arguments);
}
}
}
window.addEventListener('scroll',
throttle(function() {
console.log(document.documentElement.scrollTop);
}, 1000)
);