前端js防抖

防抖

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

eg：监听浏览器滚动事件，返回当前滚条与顶部的距离。

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

在运行的时候会发现存在一个问题：这个函数的默认执行频率太高了！我们不需要如此高频的反馈，接下来就该用防抖来优化这种场景。

此时我们可以在第一次触发事件时，不立即执行函数，而是在200ms之后执行。如果在200ms内没有再次触发滚动事件，那么就执行函数；如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时。

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)

这样就实现了防抖。