JavaScript防抖和节流

转载自https://segmentfault.com/a/1190000018428170
原作者安歌

---

假设有如下功能，监视浏览器滚动事件，返回滚动条与顶部的距离：

function showTop(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条距顶部距离:'+scrollTop)
}
window.onscroll = showTop

但是这个函数的运行频率实在太高了，不可能把浏览器的性能浪费在这里。

防抖

---

1. 定义
   对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，处理函数只执行一次。
2. 思路

• 在第一次触发事件后，不要立即执行函数，而是给出一个期限值。比如1000ms
  • 如果1000ms内没有再次触发事件则执行处理函数
  • 如果1000ms内再次触发了该事件，则当前的计时取消，重新开始计时。

3. 效果
   如果短时间内大量触发同一事件，那么只会执行一次处理函数
4. 实现

// fn:需要防抖的函数  delay:防抖的期限值,ms
function debounce(fn,delay){
    let timer = null // 借助闭包避免全局污染
    return function(){
        // 如果当前正在计时过程中，又触发了同一事件，则取消当前计时，重新开始计时
        if(timer){
            clearTimeout(timer)
            timer = setTimeout(fn,delay)
        }else{
            // 当前没有在计时，触发事件则开始计时
            timer = setTimeout(fn,delay)
        }
        /*上述代码的timer=setTimeout(fn,delay)是一定会执行的，所以可以简化
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(fn,delay)
        */
    }
}
//要防抖的函数
function showTop(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条距顶部距离:'+scrollTop)
}
window.onscroll = debounce(showTop,1000)

节流

---

1. 思考：
   上述的防抖方法有效解决了短时间内多次触发的问题，但是又出现了一个问题，如果用户一直在拖动滚动条，一直触发这个事件，理论上这个处理函数永远不会执行了。
2. 实现效果
   如果短时间内大量触发同一事件，那么在函数执行一次后，该函数在指定的事件期限内不会再执行，直至过了这段时间才生效。
3. 实现

//利用setTimeout函数做简单实现
function throttle(fn,delay){
    // 状态为valid表示当前函数是否处于工作状态
    let valid = true
    return function(){
        if(!valid){
            // valid为false则不执行函数
            return false
        }
        //valid当前为true则将其设为false，并激活定时器
        valid = false
        //定时器在指定时间后会执行处理函数，并将valid置为true，可以准备再次触发函数
        setTimeout(()=>{
            fn()
            valid = true
        },delay)
    }
}
//要节流的函数
function showTop(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条距顶部距离:'+scrollTop)
}
window.onscroll = throttle(showTop,1000)