在處理高頻事件，類似于window的resize或者scorll，或者input輸入校驗等操作時。如果直接執(zhí)行事件處理器，會增大瀏覽器的負擔，嚴重的直接卡死，用戶體驗非常不好。

面對這種情況，我們一般可以采用防抖和節(jié)流的方式減少調(diào)用頻率。同時也不會影響實際效果。

一、防抖

防抖的作用是：在事件被觸發(fā)的n秒后執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。

常見場景：

input校驗：在input輸入完成后，不需進行額外操作（比如：點擊按鈕，或者blur事件），而是需要敲完代碼通過keydown事件觸發(fā)校驗程序。此時如果不作處理，會導致校驗程序頻繁觸發(fā)，影響用戶體驗。

此時可以使用防抖來解決這個問題。代碼如下：

<input type="text" onkeydown="checkout(this)" />
<script>
    var timer = null
    // 防抖：當持續(xù)時間觸發(fā)時。一定時間內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次
    function debounce (fn, delay) {
        clearTimeout(timer)
        timer = setTimeout(fn, delay)
    }

    // 校驗方法在 1秒內(nèi) 無操作后執(zhí)行
    function checkout (input) {
        debounce(function(){
            ifCompliance(input.value)
        },1000)
    }

    // 校驗方法，長度小于 7 不規(guī)范
    function ifCompliance (val) {
        if(val && val.length < 7){
            alert("不符合規(guī)范")
        }
    }
</script>

二、節(jié)流

節(jié)流的作用是：在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。

常見場景：

如果在一個頁面中有很多張圖片，就可能會使用懶加載技術，即監(jiān)聽滾動條的改變，而加載圖片。為了避免一直觸發(fā)滾動事件的處理程序，可以使用節(jié)流。

節(jié)流 demo 如下：

// 打印 scroll 的日志
function scrollLog () {
    console.log('scrollLog')
}


// 節(jié)流：持續(xù)觸發(fā)事件時，規(guī)定在一定時間內(nèi)只會發(fā)生一次。
function throttle (fn, delay) {
    var startTime = Date.now()
    return function () {
        var curTime = Date.now()
        var remain
        if (curTime - startTime >= delay) {
            fn && fn()
            startTime = Date.now()
        }
    }
}

window.addEventListener('scroll', throttle(scrollLog, 1000))

防抖和節(jié)流的小知識就到這里，如果對你有幫助還請點個贊。