函數的節流和函數的防抖

函數的節流和函數的防抖都是優化高頻率執行的函數的一種方法。咱們知道瀏覽器中某些計算和處理要比其餘昂貴不少。好比DOM的操做。當一個操做dom的函數高頻率執行時，咱們能夠根據狀況進行節流或防抖的處理。

節流函數

在每一個時間段裏，最多隻容許運行一次。好比說resize調整窗口，在調整窗口的過程當中，事件一直在高頻率的觸發，咱們能夠利用節流函數讓其在必定的間隔時間段內最多觸發一次。用一個形象的比喻吧。生產線上的啤酒瓶排成隊往前跑，一個行動遲緩的樹懶，每一段時間內只能拿到一個瓶子。

思路：第一次調用的時候記錄一下時間戳，以後每次運行的時候都和上一次調用的時候的時間戳比較差值，當差值大於等於某個值的時候才執行。

function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      timeout = setTimeout(runCallback, delay)
    }
  }
}

防抖函數

在高頻調用中，只有足夠的空閒時間，代碼纔會執行一次，常見的就是input的change事件，只有停頓輸入的事件大於指定的時間，代碼纔會執行一次。用一個形象的比喻吧。生活中的聲控燈，只要你不停的說話，燈就不會熄滅，只有你安靜的時間大於必定的值時，燈纔會熄滅。

思路：第一次調用的時候建立一個定時器，在指定的間隔時間以後運行代碼，當第二次調用該函數時，清除前一次的定時器並另設置一個。若是前一個定時器已經執行了，這個操做就沒任何意義，若是前一個定時器還沒執行，其實就是將其替換爲一個新的定時器。目的是隻有在執行函數的請求中止了一段時間以後才執行。根據以上思路實現一個防抖函數。

function debounce(action, content, delay){
    let timeoutId = null;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
            action.apply(content);
        }, delay);
    }
}