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

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

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

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

認(rèn)識(shí)節(jié)流throttle函數(shù)

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

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

在這里插入圖片描述

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

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

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

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

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

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

在這里插入圖片描述

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

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

防抖基本功能實(shí)現(xiàn)：可以實(shí)現(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)
    }
  }
  // 封裝取消請(qǐng)求
  _debounce.cancel=function(){
    if(timer) clearTimeout(timer)
    timer=null
    isInvoke=false
  }
  return _debounce
}

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

節(jié)流函數(shù)的基本實(shí)現(xiàn)：可以實(shí)現(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
}