如何實現防抖和節流

防抖動和節流本質是不同的。防抖動是將屢次執行變爲最後一次執行，節流是將屢次執行變成每隔一段時間執行。

防抖：​觸發高頻事件後n秒內函數只會執行一次，若是n秒內高頻事件再次被觸發，則從新計算時間

解決方法：每次觸發事件時都取消以前的延時調用方法

function delayFun(fn) {
      let timeout = null; // 建立一個標記用來存放定時器的返回值
      return function () {
        clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        timeout = setTimeout(() => { // 而後又建立一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內若是還有字符輸入的話，就不會執行 fn 函數
          fn.apply(this, arguments);
        }, 500);
      };
}
function sayHi() {
      console.log('防抖成功');
 }

var box= document.getElementById('inp');
box.addEventListener('input',delayFun(sayHi)); // 防抖

 

節流：

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

解決方法：每次觸發事件時都判斷當前是否有等待執行的延時函數

function flowFun(fn) {
      let canRun = true; // 經過閉包保存一個標記
      return function () {
        if (!canRun) return; // 在函數開頭判斷標記是否爲true，不爲true則return
        canRun = false; // 當即設置爲false
        setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中
          fn.apply(this, arguments);
          // 最後在setTimeout執行完畢後再把標記設置爲true(關鍵)表示能夠執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
          canRun = true;
        }, 500);
      };
 }
 function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
 }
 window.addEventListener('resize',flowFun(sayHi));

PS：防抖和節流的做用都是防止函數屢次調用。區別在於，假設一個用戶一直觸發這個函數，且每次觸發函數的間隔小於wait，防抖的狀況下只會調用一次，而節流的 狀況會每隔必定時間（參數wait）調用函數。

 

歡迎關注個人公衆號，但願能夠與你們一塊兒學習一塊兒進步

 

 

參考文章：一、GitHub每日一道面試題

　　　　　二、interviewMap之JS