節流VS防抖

[說明] 在前端頁面中，有些事件可能會由於用戶不必要的操作而頻繁觸發，這在無形之中就增加了伺服器的IO併發量. 為瞭解決這個問題，我們通常會通過防抖或節流的方式來限制事件函數的執行次數，只不過二者實現方式不同.

防抖 (Debounce)

防抖原理

防抖函數的實現邏輯 (如右圖)     用於限制函數的執行次數. 通過定時器將事件函數的調用時間進行延遲，當短時間內連續觸發時(如點擊按鈕、拖動滾動條、縮放視窗大小等)，通過重置定時器的方式對延遲等待時間進行刷新，從而將多次觸發化為單次觸發.

// 防抖函數 (作為事件函數的裝飾器使用)
function debounce(handler) {
    let timer = null
    return function (e, ...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => handler.apply(this, [e, ...args]), 1000)
    }
}

節流 (Throttle)

節流原理

節流函數的實現邏輯 (如右圖)     用於限制函數的執行次數. 通過判斷當前事件的本次觸發時間和上次觸發時間是否在固定周期內來決定是否執行該事件的事件處理函數，從而將短時間高頻觸發化為固定時間周期內僅允許觸發一次.

// 節流函數 (作為事件函數的裝飾器使用)
function throttle(handler, delay) {
    let beginTime = 0
    return function (e, ...args) {
        let currentTime = new Date().getTime()
        if (currentTime - beginTime > delay) {
            handler.apply(this, [e, ...args])
            beginTime = currentTime
        }
    }
}