js 函数防抖

什么是防抖

一个函数在ｎ秒内只执行第一次或者最后一次

防抖的使用场景

onResize事件，onscroll事件，ommouseover,onmouseout事件等，会频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行多次或者几十次，乃至于几百次，如果在这些函数内部执行了其他函数，尤其是执行了dom操作的函数，不仅会浪费计算机资源，还会降低运行速度，甚至造成浏览器卡死，崩溃，这些问题都是致命的

实现思路 

第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms

然后

        如果在200ms内没有再吃触发滚动等事件，那么久执行函数

        如果在200ms内再次触发滚动事件，那么当前的计划取消，重新开始计时

效果

如果指定时间内大量触发同一事件，只会执行一次函数

代码

function debounce(fn,delay){
    let timer = null
    return function(){
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(fn,delay)
    }
}

function scrollToTop(){
    let scrollToTop = document.body.scrollTop || document.documentElement.scrollTop
    console.log("滚动位置记录"+scrollToTop)
}

window.onscroll = debounce(scrollToTop,1000)

总结

防抖的意义：对于在段时间内多次触发的函数，在指定时间只触发一次