JS防抖(debounce)和節流(throttle)

1. 是什麼

本質是優化高頻率執行代碼的手段，好比 scroll keypress mousemove等事件。

定義

防抖(debounce):在事件被觸發n秒後在執行回調，若是在這n秒內又被觸發，測從新計時。

節流(throttle):在規定的時間間隔內，只觸發一次回調函數，若是規定時間內觸發屢次函數，只有一次生效。

2. 代碼實現

防抖：

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event對象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}
複製代碼

節流：時間戳和定時器結合使用

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() // 當前時間
        let remaining = delay - (curTime - starttime)  // 從上一次到如今，還剩下多少多餘時間
        let context = this
        let args = arguments
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}
複製代碼

區別

-相同點

下降回調執行頻率。節省計算資源

均可以使用setTimeout

-不一樣點

- 函數防抖，在一段連續操做結束後，處理回調，利用clearTimeout 和 setTimeout實現。函數節流，在一段連續操做中，每一段時間只執行一次，頻率較高的事件中使用來提升性能

- 函數防抖關注必定時間連續觸發的事件，只在最後執行一次，而函數節流一段時間內只執行一次