JS 防抖和節流

防抖和節流

在處理高頻事件，相似於window的resize或者scorll，或者input輸入校驗等操做時。若是直接執行事件處理器，會增大瀏覽器的負擔，嚴重的直接卡死，用戶體驗很是很差。

面對這種狀況，咱們通常能夠採用防抖和節流的方式減小調用頻率。同時也不會影響實際效果。

1、防抖

防抖的做用是：在事件被觸發的n秒後執行回調，若是在這n秒內又被觸發，則從新計時。

常見場景：

input校驗：在input輸入完成後，不需進行額外操做（好比：點擊按鈕，或者blur事件），而是須要敲完代碼經過keydown事件觸發校驗程序。此時若是不做處理，會致使校驗程序頻繁觸發，影響用戶體驗。

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

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

    // 校驗方法在 1秒內 無操做後執行
    function checkout (input) {
        debounce(function(){
            ifCompliance(input.value)
        },1000)
    }

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

2、節流

節流的做用是：在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效。

常見場景：

若是在一個頁面中有不少張圖片，就可能會使用懶加載技術，即監聽滾動條的改變，而加載圖片。爲了不一直觸發滾動事件的處理程序，可使用節流。

節流 demo 以下：

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


// 節流：持續觸發事件時，規定在必定時間內只會發生一次。
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))

防抖和節流的小知識就到這裏，若是對你有幫助還請點個贊。

最近在搞一個和前端程序員相關的公號，除了技術分享以外，也增長了對於職業發展、生活記錄之類的文章，歡迎你們關注，一塊兒聊天、吐槽，一塊兒努力工做，認真生活！