浅谈JS防抖 节流

防抖和节流其实是属于性能优化的范畴   但因为触发频率非常高   如果放任不管或者处理不当就很容易引起浏览器卡死，所以还是很有必要掌握这个知识的。

频率高的监听

---

很多监听默认的执行频率都非常高  1s会执行3-4次的样子  如:滚动条的监听 视频播放的监听...

实际上我们并不需要这么高频率的反馈，毕竟浏览器性能是有限的，接下来我们看一下如何优化监听滚动做返回顶部的场景 

function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll  = showTop    这个就是没优化之前的返回顶部

防抖(deBounce)

第一种思路：在第一次触发事件的时候，不立即去执行函数，给一个时间比如500ms，然后：

　　　　　　如果500ms没有再次触发这个事件就执行接下来的操作

　　　　　　如果500ms之后又触发监听函数，那当前的计数取消重新开始计时(这种可能满足不了隔多久一执行的情景)

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

实现：计时的关键就在于setTimeout函数，由于还需要一个变量保存计时，考虑维护全局环境纯净，可以借助闭包实现

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) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

此刻会发现 只有在滚动停止1s以后 才会打印滚动条所在位置

至此，把防抖差不多实现了，现在给出定义：对于短时间内连续触发的事件(上面的滚动事件)，防抖的含义就是让某个时间范围内，事件函数只执行一次。

节流(throttle)

使用上面的防抖方案处理的结果是：如果在限定时间段内，不断触发滚动事件，只要不停止触发，那永远不会输出滚动条所在的位置。

期望：即使用户一直来回拖动滚动条，也希望隔断时间输出滚动条所在位置呢

效果：如果短时间内大量触发同一事件，那么在函数执行一次后 在某个时间段内暂时失效 过了这个时间重新生效

实现：这里借助setTimeout来实现，加一个变量来判断现在是否是生效状态

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //失效状态
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

运行上述代码的结果是：如果一直拖动滚动条那么会以1s的时间间隔输出当前滚动条所在的位置