函数防抖(debounce)
在项目中经常会遇见滚动上拉继续加载的结果,如果数据量比较大,并且服务器响应不够及时的时候,用户的来回上拉会加重服务器压力,并且用户体验也不够好,所以函数防抖就非常的有必要。
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
//函数防抖
function debounce(fn,await){
var timer=null;
return function(){
if(timer!==null){
console.log(111)
clearTimeout(timer);
}
timer=setTimeout(fn,await);
console.log(222)
}
}
function eventDispose(){
console.log(Math.random())
}
window.addEventListener('scroll',debounce(eventDispose,1000))
//经过试验证明,如果一秒之内来回滚动滚动条并不会触发事件处理函数,只有在停下来的一秒钟之后才会触发eventDispose函数
代码解释:在第一次持续滚动的时候,触发监听事件,并且调用了
debounce
函数,第一次持续滚动的第一次 是没有timer
的,于是创建了一个timer
(可以看到控制台是先输出的222,然后输出111)等到一秒钟之内再次触发这个函数的时候就会清除掉之前的timer
,并且进入到了if
判断条件当中(打印1111),并且清除掉,然后再走延时器再打印出222。