防抖節(jié)流函數(shù)：

防抖：

當持續(xù)觸發(fā)事件時, 一定時間內(nèi)沒有再觸發(fā)，事件處理函數(shù)執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時
假如期限值是200ms
1、在200ms 內(nèi)沒有再次觸發(fā)事件，那么就執(zhí)行函數(shù)；
2、如果在200ms 內(nèi)再次觸發(fā)了滾動事件，那么當前計時器取消，重新開始計時；

image.png

function debounce(fn,delay){
let timer = null;
return function(){
   if(timer){
//進入該分支語句，說明當前正在一個計時過程中，并且又觸發(fā)了相同事件。所以要取消當前的計時，重新開始計時
    clearTimeout(timer)
   }
   timer = setTimeout(fn,delay)
}
}

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

節(jié)流函數(shù)：

當持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。

函數(shù)防抖(debounce)：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間。
函數(shù)節(jié)流(throttle)：高頻事件觸發(fā)，但在n秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率。

實現(xiàn)函數(shù)節(jié)流我們主要有兩種方法：時間戳和定時器

image.png

// 節(jié)流 （時間戳）
var throttle = function(fn,delay){   
   var pre = Date.now();
   return function(){
     var _this = this;
     var args = arguments;
     var now = Date.now();
     if(now-pre>=delay){
       fn.apply(_this,args);
      pre = Date.now()
     }
   }
}

function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

當觸發(fā)事件的時候，我們設(shè)置一個定時器，再次觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行，直到delay時間后，定時器執(zhí)行執(zhí)行函數(shù)，并且清空定時器，這樣就可以設(shè)置下個定時器。

// 定時器
 var throttle = function (fn,delay){
      var timer = null;
      return function (){
        var _this = this;
        var args= arguments;
        if(!timer){
          timer = setTimeout(()=>{
            fn.apply(_this,args)
            timer = null
          },delay)
        }
      }
    }

當remaining<=0時表示該執(zhí)行事件處理函數(shù)了（保證了第一次觸發(fā)事件就能立即執(zhí)行事件處理函數(shù)和每隔delay時間執(zhí)行一次事件處理函數(shù)）。
如果還沒到時間的話就設(shè)定在remaining時間后再觸發(fā) （保證了最后一次觸發(fā)事件后還能再執(zhí)行一次事件處理函數(shù)）。
當然在remaining這段時間中如果又一次觸發(fā)事件，那么會取消當前的計時器，并重新計算一個remaining來判斷當前狀態(tài)。

// 節(jié)流throttle代碼（時間戳+定時器）：
    var throttle = function (fn,delay){
     var timer = null;
     var startTime = Date.now(); // 進來開始的時間
     return function(){
       var currentTime = Date.now();
       var remaining = delay-(currentTime-startTime);
       var _this = this;
       var args = arguments;
       clearTimeout(timer);
       if(remaining<=0){
         fn.apply(_this.args)
         startTime = Date.now()
       }else{
         timer = setTimeout(fn,remaining)
       }

     }
    }