前言

防抖和節(jié)流算是非常普及的概念了，不止在前端，甚至不止在編程領(lǐng)域，許許多多的地方都能用到這兩個概念，這篇文章主要總結(jié)分享一下我自己在JS中對這兩個概念的代碼實現(xiàn)。

防抖

防抖顧名思義就是防止或消除抖動，我第一次接觸這個概念還是是當(dāng)初大學(xué)學(xué)單片機的時候。在前端的領(lǐng)域里面，這個概念可以理解為一個高頻率的事件只有在停止觸發(fā)一定時間后才會執(zhí)行對應(yīng)的處理函數(shù)，比較常見的場景就是文本框輸入時觸發(fā)的事件。比如輸入文字自動搜索的功能，我們在搜索時一般希望輸入完一個詞組或一個句子后自動進行搜索，而不是每輸入一個字或是一個字面后就搜索一次，這里就需要應(yīng)用到防抖。只有用戶停止輸入后才會執(zhí)行事件
代碼也很簡單:

function debounce(fn, time) {
  let timer = null
  return () => {
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, time)
  }
}

在這里只有事件停止觸發(fā)一定時間后才會執(zhí)行處理函數(shù),如果等待時間內(nèi)又一次觸發(fā)時間,那么會重新計時。

節(jié)流

節(jié)流在這里也是限制高頻事件的觸發(fā),節(jié)流規(guī)定了一個單位時間，在這個單位時間內(nèi)只能觸發(fā)一次。
防抖和節(jié)流的區(qū)別用文本框輸入文字來演示的話,假如時間都設(shè)置為1s,用戶不斷輸入文字,防抖的話是停止輸入1s后函數(shù)執(zhí)行,只執(zhí)行一次。節(jié)流則是在用戶輸入期間,每隔一秒執(zhí)行一次函數(shù),可能會執(zhí)行多次。

function throttle(fn, time) {
  let oldTime = 0
  return () => {
    const newTime = new Date()
    if (newTime - oldTime >= wait) {
      fn()
      oldTime = newTime
    }
  }
}

小結(jié)

在這里防抖和節(jié)流只給出了最簡單的代碼,如果實際的函數(shù)更加復(fù)雜,需要考慮到執(zhí)行上下文的話,那就要用到call或者apply函數(shù)來指定this的指向。這個到時候就需要根據(jù)實際情況具體分析了。