防抖

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

思路：

每次觸發事件時，都取消之前的延時呼叫方法。

function debounce(fn,wait) {
      let timeout = null; // 建立一個標記用來存放定時器的返回值
      let timeWait = wait || 1000
      return function () {
           const that = this,
                    args = arguments;
           clearTimeout(timeout); // 每當使用者輸入的時候把前一個 setTimeout clear 掉
           timeout = setTimeout(() => { 
              fn.apply(that , args);//1,this 指向2,event 物件
           }, timeWait);
      };
 }

 

防抖

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

思路：

每次觸發事件時都判斷當前是否有等待執行的延時函式

function throttle(fn,wait) {
      let canRun = true; // 通過閉包儲存一個標記
      let timeWait = wait || 1000;
      return function () {
      		const that = this,
                     args = arguments;
	        if (!canRun) return; // 在函式開頭判斷標記是否為true，不為true則return
	        canRun = false; // 立即設定為false
	        setTimeout(() => { // 將外部傳入的函式的執行放在setTimeout中
		          fn.apply(that,  args );
		          // 最後在setTimeout執行完畢後再把標記設定為true(關鍵)表示可以執行下一次迴圈了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
		          canRun = true;
	        }, 500);
      };
}
 

連結：
JavaScript專題之跟著underscore學防抖
JavaScript專題之跟著 underscore 學節流