防抖的详解

       <button>点我啊</button>
       
        //基础防抖
        let timer = null
        document.querySelector('button').onclick=function() {
            clearTimeout(timer)
            timer = setTimeout(()=>{
                console.log('1111');
            }, 1000)
            
        }

可参考：https://segmentfault.com/a/1190000018428170

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay)
    }
}

function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}

window.onscroll = debounce(showTop,1000) 

防抖用于控制一个不停的动作（例如：不停打印/不停发送 ）
代码详解：
window.onscroll = debounce(showTop,1000)
将debounce函数执行后的返回值赋值给window.onscroll ，如下：

window.onscroll = function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay)
    }

轻微滚动滚轮时（假设只触发一次函数），执行上面的函数。
第一次执行时：
timer = null
执行：

 timer = setTimeout(fn,delay)

再次轻微滚动滚轮时（也假设只触发一次函数）
第二次执行时：
timer = 上一次定时器返回的数值
执行：

 if(timer){
     clearTimeout(timer) 
 }
 timer = setTimeout(fn,delay)

注意：setTimeout() 方法的返回值是一个唯一的数值，这个数值有什么用呢？如果你想要终止 setTimeout() 方法的执行，那就必须使用 clearTimeout() 方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法)，这样 clearTimeout() 方法就需要一个参数，这个参数就是 setTimeout() 方法的返回值 (数值)，用这个数值来唯一确定结束哪一个 setTimeout() 方法。