js优化浏览器性能 防抖操作

1.监听浏览器滚动条

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

2.利用闭包创建函数

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

3.直接调用

window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置 1000ms

4.实现思路，防抖就是在特定时间内由于用户操作平凡，函数执行次数过多造成浏览器性能下降，我们可以让函数在指定时间内如果过多执行，我们只执行一次

• 如果在1000ms内没有再次触发滚动事件，那么就执行函数
• 如果在1000ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

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