JavaScript 防抖和節流

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰javascript

函數防抖

防抖概念

事件觸發後 n 秒後開始執行，n 秒內再次觸發則從新計時
若是一直在 n 秒內觸發事件，則回調一直不會執行
聯想公交車上客場景，上完一波人，長時間沒有人上了，就會關門出發
通常用於提交數據、ajax 請求、輸入驗證等

防抖函數封裝

不須要當即執行java

利用閉包，設置 timer 保存計時器狀態ajax

每次觸發事件時，不管如何先清空計時器，再開新計時器markdown

function debounce(fn, delay) {
    let timer;
    return function() {
        const _args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, _args);
        }, delay);
    };
}
複製代碼

須要當即執行閉包

核心是有計時器就清除，並開啓新計時器app

當即執行的邏輯是執行後開啓一個定時器保持不可執行狀態函數

/** * 防抖函數：每一次的高頻觸發只執行一次 * * @param fn 目標函數 * @param delay 延遲時間 * @param triggerNow 是否當即執行 * @return {(function(): void)|*} */
function debounce(fn, delay, triggerNow) {
    let timer = 0;
    let executed = false;
    return function () {
        const _args = arguments;
        clearTimeout(timer);
        // 先關閉定時器
        if (triggerNow) {
            // 若是須要當即執行
            // 判斷 executed 是否爲 false，爲 false 則執行
            // 開啓新定時器防止短期內再次觸發
            if (!executed) {
                fn.apply(this, _args);
                executed = true;
            }
            timer = setTimeout(function () {
                executed = false;
            }, delay);
        } else {
            // 若是不須要當即執行
            // 每次觸發開啓新定時器便可
            timer = setTimeout(function () {
                fn.apply(this, _args);
            }, delay);
        }
    };
}
複製代碼

函數節流

節流概念

事件觸發後 n 秒內只執行一次， n 秒內再次觸發則不執行
若是一直觸發事件，則會間隔 n 秒執行一次
聯想地址過閘場景，無論多少人等待，都要一個一個、開閘關閘有序經過
通常用於輸入驗證、搜索框提示等

節流函數封裝

計算時間差實現post

function throttle(fn, interval) {
  let begin = new Date().getTime()

  return function() {
    const _args = arguments
    
    const cur = new Date().getTime()

    // 過了指定長的時間才執行
    if(cur - begin >= interval) {
      fn.apply(this, _args)
      begin = cur
    } 
  }
}
複製代碼

計時器實現ui

核心是有計時器就 returnthis

/** * 節流函數：高頻觸發時，按指定間隔執行 * * @param fn 目標函數 * @param interval 時間間隔 * @return {(function(): void)|*} */
function throttle(fn, interval) {
    let timer = 0;

    return function () {
        const _args = arguments;

        // 有定時器則返回
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, _args);
            timer = 0;
        }, interval);
    };
}
複製代碼