js函式防抖debounce和節流throttle

一，防抖

1. 每執行一次函式，都要等待固定的時間後。。才會去執行函式。應用場景：輸入搜尋。快速點選按鈕觸發請求等。
2. debouce的模擬實現；

Function.prototype.myDebounce = function(callback, wait) {
    let timer = null;
    return function(...rest) {
        if(timer) {
            // 如果上次的定時器還存在，則清除。重新等待時間
            clearTimeout(tiemr);
        }
        setTimeout(()=> {// 使用箭頭函式，確保this還能定義在當前執行環境
            // 裡邊的閉包的this必須保持和callback保持一致。確保使用ok
            callback.apply(this, rest);
        }, wait)
    }
}
複製程式碼

二，節流

1. 在一段時間內。無論觸發多少次函式。都只執行一次。應用場景：滾動拉介面載入資料等。
2. throttle的模擬實現

Function.prototype.myThrottle = function(cb, wait) {
    let flag = false;
    return function(...arg) {
        if(flag) {
            return;
        }
        flag = true;
        setTimeout(() => {
            cb.apply(this, arg);
            flag = false;
        }, wait)
    }
}
複製程式碼