防抖截流

防抖

function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay) 
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}

 防抖简化版

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

防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

截流

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
window.onscroll = throttle(showTop,1000) 

如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离