浅谈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的时间间隔输出当前滚动条所在的位置

浅谈JS防抖 节流

浅谈JS防抖节流