js防抖和節流的區別及實現方式

概念

函式防抖(debounce)： 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

函式節流(throttle)： 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。

函式節流（throttle）與 函式防抖（debounce）都是為了限制函式的執行頻次，以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

比如如下的情況：

• window物件的resize、scroll事件
• 拖拽時的mousemove事件
• 文字輸入、自動完成的keyup事件

函式防抖(debounce)

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

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

函式節流(throttle)

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

//節流throttle程式碼：
function throttle(fn,delay) {
    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;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('節流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

區別

可以拿我們平時坐電梯為例來形象地表述二者的區別
函式防抖： 如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。
函式節流 ： 保證如果電梯第一個人進來後，10秒後準時運送一次，這個時間從第一個人上電梯開始計時，不等待，如果沒有人，則不執行。

函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。

函式防抖： 將多次操作合併為一次操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。

函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否有延遲呼叫函式未執行。