函数防抖和函数节流

函数防抖（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函数

image.png
代码解释：在第一次持续滚动的时候，触发监听事件，并且调用了debounce函数，第一次持续滚动的第一次 是没有timer的，于是创建了一个timer（可以看到控制台是先输出的222，然后输出111）等到一秒钟之内再次触发这个函数的时候就会清除掉之前的timer，并且进入到了if判断条件当中（打印1111），并且清除掉，然后再走延时器再打印出222。