JS實現防抖(debounce)及節流(throttle)函數

這兩種函數算是應用場景比較廣泛的函數了，那麼如何實現它呢？

什麼是防抖？什麼是節流？

舉例來說，比如要搜索某個字符串，基於性能考慮，肯定不能用戶沒輸入一個字符就發送一次搜索請求，一種方法就是等待用戶停止輸入，比如過了500ms用戶都沒有再輸入，那麼就搜索此時的字符串，這就是防抖；節流比防抖寬鬆一些，比如我們希望給用戶一些搜索提示，所以在用戶輸入過程中，沒過500ms就查詢一次相關字符串，這就是節流。

實現這兩種方法的核心其實都是setTimeout方法。

防抖的實現思路：每次觸發事件時都取消之前的延時調用方法：

function debounce(fn, delay) {
    let handle;
    return function (e) {
        // 取消之前的延時調用
        clearTimeout(handle);
        handle = setTimeout(() => {
            fn(e);
        }, delay);
    }

}

測試：

function sayHi(e){
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', debounce(sayHi, 500));

效果：

節流的實現思路：每次觸發事件時都判斷當前是否有等待執行的延時函數：

function throttle(fn, delay) {
    let runFlag = false;
    return function (e) {
        // 判斷之前的調用是否完成
        if (runFlag) {
            return false;
        }
        runFlag = true;
        setTimeout(() => {
            fn(e);
            runFlag = false;
        }, delay)
    }
}

測試：

function sayHi(e){
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi, 500));

效果：

推薦成熟的庫方法：lodash