節流：

高頻事件不斷觸發，每隔一定時間會執行一次，會稀釋高頻事件；

實現原理：在閉包內設定一個標記，初始值為true，若標記為false，則退出函式，不執行，若標記值為true，馬上將標記變成false；並且執行一個定時器，在定時器內執行回撥函式，並且將標記設定為true；

具體程式碼：

   function throttle(fn,time){
      var canrun = true;//通過閉包儲存一個標記
      return function(){//返回一個函式
        if(!canrun) return;//如果不在執行時間內 則不執行
        canrun = false
 
;//如果在執行時間內 馬上將標記改為false 然後執行後續程式碼
        setTimeout(() => {
          // 執行時間結束時 執行函式 並且將標記設定為可執行
          fn.apply(this,arguments);
          canrun = true;
        },time);
      };
    }

測試程式碼：

    let dom = document.getElementsByClassName("content")[0];
    var log2 = throttle(log,2000);//把log函式變成一個節流函式
 

    dom.addEventListener("click",function(){
      log2(222);
    })
    function log(num){
      console.log(num);
    }

防抖：

高頻事件觸發時，在一定時間內函式只會觸發一次，如果不停觸發，那麼久只執行一次，不會隔一段時間執行一次，除非中間停止足夠的時間，才會觸發第二次；

實現原理：在閉包內定義一個變數，次變數用來存放定時器，執行函式時會先清除上一個定時器，然後重新設定一個定時器，定時器內執行回撥函式，如果一直觸發，就會不斷的清除計時器，函式就不會執行；

具體程式碼：

   function
 
 debounce(fn,time){
      let timeout = null;
      return function(){
        clearTimeout(timeout); //清除定時器 定時器清除後，內部的函式就不會執行
        timeout = setTimeout(() => {//重新設定定時器
          fn.apply(this,arguments);//執行函式
        }, time);
      }
    }

測試程式碼：

    let dom = document.getElementsByClassName("content")[0];
    var log2 = debounce(log,2000);//把log函式變成防抖函式
    dom.addEventListener("click",function(){
      log2(222);
    })
    function log(num){
      console.log(num);
    }

總結一下，節流函式和防抖函式在高頻事件不斷觸發時會有明顯區別；節流函式會稀釋高頻事件，而防抖會阻斷，事件不停，函式就不會執行