防抖和节流

防抖(debouncing)
典型例子:限制 鼠标连击 触发。
当一次事件发生后,事件处理器要等一定阈值的时间,如果这段时间过去后 再也没有 事件发生,就处理最后一次发生的事件。
假设还差 0.01 秒就到达指定时间,这时又来了一个事件,那么之前的等待作废,需要重新再等待指定时间
function debounce1(fn,wait = 1000){
    let timeout = null
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(function () {
            fn.call(this,arguments)
        },wait)
    }
}

节流(throttling)
可以理解为事件在一个管道中传输,加上这个节流阀以后,事件的流速就会减慢。
实际上这个函数的作用就是如此,它可以将一个函数的调用频率限制在一定阈值内,例如 1s,那么 1s 内这个函数一定不会被调用两次
function throttling(fn,wait) {
        let canRun = true
        return function () {
            if(!canRun) return
            canRun = false
            setTimeout(()=>{
                fn.call(this,arguments)
                canRun = true
            },wait)
        }
    }


 
原文地址:https://www.cnblogs.com/yourName/p/12395656.html