什么是函數(shù)的防抖和節(jié)流？

它是優(yōu)化處理高頻率代碼執(zhí)行的一種手段；比如我們監(jiān)聽resize窗口的變化、scroll滾動、mousemove移動、keypress按下等事件的時候，它會頻繁的調(diào)用我們綁定的事件，很容易浪費前端資源，從而降低性能；

1、節(jié)流手段

節(jié)流n秒內(nèi)只運行一次，在n秒內(nèi)重復(fù)觸發(fā)，只有一次執(zhí)行；
常用來應(yīng)用的場景，在間隔一段時間執(zhí)行一次回調(diào)函數(shù)，有：
滾動加載、加載更多、滾動到底部監(jiān)聽；
搜索框，搜索聯(lián)想功能

實現(xiàn)：
時間戳寫法，事件會立即執(zhí)行，停止觸發(fā)后沒有辦法再次執(zhí)行：

function throttled1(fn,delay = 500){
  let oldtime =  Date.now();
  return function(...args){
      let newtime = new Date.now();
      if(newtime - oldtime >= delay){
          fn.apply(null,args);
          oldtime = new Date.now();
      }
  }
}

使用定時器寫法，delay毫秒后運行一次，第二次事件停止觸發(fā)后依然會再一次運行

function throttled2(fn,delay = 500){
  let timer = null;
  return function(...args){
    if(!timer){
        timer = setTimeout(()=>{
             fn.apply(this,args)
             timer = null;
        },delay)
    }
  }
}

可以將時間戳寫法的特性與定時器寫法的特性相結(jié)合，實現(xiàn)一個更加精確的節(jié)流。實現(xiàn)如下:

function throttled(fn,delay){
  let timer = null;
  let startimer = Date.now();
  return function(){
      let _that = this;
      let curttime = Date.now(); //當(dāng)前時間
      let remaining = delay - (curttime - startimer); //從上一次到現(xiàn)在，還剩下多少時間
      let args = arguments
      clearTimeout(timer);
      if(remaining <=0){
        fn.apply(_that,args)
        startimer = Date.now();
      }else{
        timer = setTimeout(fn,remaining);
      }
      
  }
}

2、防抖
n秒后執(zhí)行該事件，若在n秒內(nèi)被重復(fù)觸發(fā)，則重新計時；
常應(yīng)用的場景，在連續(xù)的事件，只需觸發(fā)一次回調(diào)的場景有：
搜索框搜索輸入，只需要用戶最后一次輸入完，再發(fā)送請求；
手機號、郵箱驗證輸入檢測
窗口大小resize，只需要窗口調(diào)整完成后，計算窗口大小，防止重復(fù)渲染；
實現(xiàn)：
簡單版實現(xiàn)：

function debounce(func,wait){
    let timer ;
    return function(){
      let _that = this;  //保存this指向
      let args = arguments; // 拿到events對象
      clearTimeout(timer);
      timer = setTimeout(function(){
          func.apply(_that,args)
      },wait)
    }
}

防抖如果需要立即執(zhí)行，可加入第三個參數(shù)用于判斷，實現(xiàn)如下：

function debounce(func,wait,imediate){
  let timeout;
  return function(){
    let _that = this;
    let args = arguments;
    
    if(timeout) clearTimout(timeout);
    if(imediate){
      let callNow = !timeout; //第一次會立即執(zhí)行，以后只有事件執(zhí)行后才會再次觸發(fā)
      timeout = setTimeout(function(){
          timeout = null;
      },wait)
      if(callNow){
        func.apply(_that,args)
      }
    }else{
      timer = setTimeout(function(){
          func.apply(_that,args)
      },wait)
    }

  }

}

區(qū)別
相同點：
都可以通過setTimeout 實現(xiàn)，目的都是降低回調(diào)執(zhí)行頻率，節(jié)省計算資源
不同點：
函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用clearTimeout和 setTimeout實現(xiàn)。函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時間只執(zhí)行一次，頻率較高的事件中使用來提高性能
函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件，只在最后執(zhí)行一次，而函數(shù)節(jié)流一段時間內(nèi)只執(zhí)行一次

例如，都設(shè)置時間頻率為500ms，在2秒時間內(nèi)，頻繁觸發(fā)函數(shù)，節(jié)流，每隔 500ms 就執(zhí)行一次。防抖，則不管調(diào)動多少次方法，在2s后，只會執(zhí)行一次

摘引：【js每日一題】https://mp.weixin.qq.com/s/xGMUjQiZEI7PV8Wlvf_YNA