js防抖和節流的實現及使用

作用

防抖和節流是針對響應跟不上觸發頻率這類問題的兩種解決方案。 在給 DOM 綁定事件時，有些事件我們是無法控制觸發頻率的。 如鼠標移動事件 onmousemove, 滾動滾動條事件 onscroll，窗口大小改變事件 onresize，瞬間的操作都會導致這些事件會被高頻觸發。 如果事件的回調函數較爲複雜，就會導致響應跟不上觸發，出現頁面卡頓，假死現象。 在實時檢查輸入時，如果我們綁定 onkeyup 事件發請求去服務端檢查，用戶輸入過程中，事件的觸發頻率也會很高，會導致大量的請求發出，響應速度會大大跟不上觸發。

針對此類快速連續觸發和不可控的高頻觸發問題，debounce 和 throttling 給出了兩種解決策略；

防抖

觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

• 實現方式：每次觸發事件時設置一個延遲調用方法，並且取消之前的延時調用方法
• 缺點：如果事件在規定的時間間隔內被不斷的觸發，則調用方法會被不斷的延遲

//防抖debounce代碼：
function debounce(fn) {
    let timeout = null; // 創建一個標記用來存放定時器的返回值
    return function () {
        // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        clearTimeout(timeout);
        // 然後又創建一個新的 setTimeout, 這樣就能保證interval 間隔內如果時間持續觸發，就不會執行 fn 函數
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, 500);
    };
}
// 處理函數
function handle() {
    console.log(Math.random());
}
// 滾動事件
window.addEventListener('scroll', debounce(handle));

節流

高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

• 實現方式：每次觸發事件時，如果當前有等待執行的延時函數，則直接return

//節流throttle代碼：
function throttle(fn) {
    let canRun = true; // 通過閉包保存一個標記
    return function () {
         // 在函數開頭判斷標記是否爲true，不爲true則return
        if (!canRun) return;
         // 立即設置爲false
        canRun = false;
        // 將外部傳入的函數的執行放在setTimeout中
        setTimeout(() => { 
        // 最後在setTimeout執行完畢後再把標記設置爲true(關鍵)表示可以執行下一次循環了。
        // 當定時器沒有執行的時候標記永遠是false，在開頭被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, 500);
    };
}

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

區別與應用

• 函數防抖：將多次操作合併爲一次操作進行。原理是維護一個計時器，規定在delay時間後觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最後一次操作能被觸發。
• 函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否有延遲調用函數未執行。
• 區別與應用： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。 比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時纔去請求數據。這樣的場景，就適合用節流技術來實現。例如：在進行搜索的時候，當用戶停止輸入後調用方法，節約請求資源，這時適合用防抖。類似打遊戲的時候長按某個按鍵，動作是有規律的在間隔時間觸發一次，適合用節流。