當(dāng)我輸入m時，為了更好的用戶體驗，通常會出現(xiàn)對應(yīng)的聯(lián)想內(nèi)容，這些聯(lián)想內(nèi)容通常是保存在服務(wù)器的，所以需要一次網(wǎng)絡(luò)請求；
當(dāng)繼續(xù)輸入ma時，再次發(fā)送網(wǎng)絡(luò)請求；
那么macbook一共需要發(fā)送7次網(wǎng)絡(luò)請求；
這大大損耗我們整個系統(tǒng)的性能，無論是前端的事件處理，還是對于服務(wù)器的壓力;

但是我們需要這么多次的網(wǎng)絡(luò)請求嗎？

不需要，正確的做法應(yīng)該是在合適的情況下再發(fā)送網(wǎng)絡(luò)請求；
比如如果用戶快速的輸入一個macbook，那么只是發(fā)送一次網(wǎng)絡(luò)請求；
比如如果用戶是輸入一個m想了一會兒，這個時候m確實應(yīng)該發(fā)送一次網(wǎng)絡(luò)請求；
也就是我們應(yīng)該監(jiān)聽用戶在某個時間，比如500ms內(nèi)，沒有再次觸發(fā)時間時，再發(fā)送網(wǎng)絡(luò)請求；

這就是防抖的操作：只有在某個時間內(nèi)，沒有再次觸發(fā)某個函數(shù)時，才真正的調(diào)用這個函數(shù)；

認識節(jié)流throttle函數(shù)

我們用一副圖來理解一下節(jié)流的過程

當(dāng)事件觸發(fā)時，會執(zhí)行這個事件的響應(yīng)函數(shù)；
如果這個事件會被頻繁觸發(fā)，那么節(jié)流函數(shù)會按照一定的頻率來執(zhí)行函數(shù)；
不管在這個中間有多少次觸發(fā)這個事件，執(zhí)行函數(shù)的頻繁總是固定的；

在這里插入圖片描述

節(jié)流的應(yīng)用場景：

監(jiān)聽頁面的滾動事件；
鼠標移動事件；
用戶頻繁點擊按鈕操作；
游戲中的一些設(shè)計；

節(jié)流函數(shù)的應(yīng)用場景

很多人都玩過類似于飛機大戰(zhàn)的游戲

在飛機大戰(zhàn)的游戲中，我們按下空格會發(fā)射一個子彈：

很多飛機大戰(zhàn)的游戲中會有這樣的設(shè)定，即使按下的頻率非常快，子彈也會保持一定的頻率來發(fā)射；
比如1秒鐘只能發(fā)射一次，即使用戶在這1秒鐘按下了10次，子彈會保持發(fā)射一顆的頻率來發(fā)射；
但是事件是觸發(fā)了10次的，響應(yīng)的函數(shù)只觸發(fā)了一次；

在這里插入圖片描述

自定義防抖和節(jié)流函數(shù)

我們按照如下思路來實現(xiàn)：

防抖基本功能實現(xiàn)：可以實現(xiàn)防抖效果

優(yōu)化一：優(yōu)化參數(shù)和this指向
優(yōu)化二：優(yōu)化取消操作（增加取消功能）
優(yōu)化三：優(yōu)化立即執(zhí)行效果（第一次立即執(zhí)行）
優(yōu)化四：優(yōu)化返回值

function debounce(fn,delay,immediate=false,resultCallback){
  let timer=null
  // console.log(this)//window
  // 定義控制立即執(zhí)行的變量,false表示沒有執(zhí)行過
  let isInvoke=false
  // 真正的處理函數(shù)
  function _debounce(...args){
    // 取消事件執(zhí)行操作
    if(timer) clearTimeout(timer)
    // console.log(this)//element元素
    if(immediate&&!isInvoke){
      const result=fn.apply(this,args)
      resultCallback(result)
      isInvoke=true
    }else{
      // 延遲執(zhí)行
      timer=setTimeout(()=>{
        const result=fn.apply(this,args)
        resultCallback(result)
        timer=null
        isInvoke=false
      },delay)
    }
  }
  // 封裝取消請求
  _debounce.cancel=function(){
    if(timer) clearTimeout(timer)
    timer=null
    isInvoke=false
  }
  return _debounce
}

我們按照如下思路來實現(xiàn)：

節(jié)流函數(shù)的基本實現(xiàn)：可以實現(xiàn)節(jié)流效果

優(yōu)化一：節(jié)流最后一次也可以執(zhí)行
優(yōu)化二：優(yōu)化添加取消功能
優(yōu)化三：優(yōu)化返回值問題

function throttle(fn,interval,options={leading:true,trailing:false}){
  let lastTime=0
  const {leading,trailing,resultCallback}=options
  let timer=null
  function _throttle(...args){
    const nowTime=new Date().getTime()
    // leading優(yōu)化
    if(!leading&&!lastTime) lastTime=nowTime
    let remainTime=interval-(nowTime-lastTime)
    if(remainTime<=0){
      if(timer){
        clearTimeout(timer)
        timer=null
      }
      // 參數(shù)優(yōu)化
      const result=fn.apply(this,args)
      if(resultCallback) resultCallback(result)
      lastTime=nowTime
      return
    } 
    // 優(yōu)化trailing
    if(!timer&&trailing){
      timer=setTimeout(()=>{
        // 參數(shù)優(yōu)化
        const result=fn.apply(this,args)
        if(resultCallback) resultCallback(result)
        timer=null
        lastTime=!leading?0:new Date().getTime()
      },remainTime)
    }
  }
  _throttle.cancel=function(){
    if(timer) clearTimeout(timer)
    timer = null
    lastTime = 0
  }
  return _throttle
}