初探函數節流和函數防抖—以項目爲例(更新es6語法)

一 項目需求

最近在作一些小的練手代碼的時候，碰到了一個很常見的問題，當在搜索框中進行搜索的時候，若是快速輸入不少字符的話，搜索框的監聽回調函數會執行不少次，若是回調業務較複雜的話，可能會致使頁面運行緩慢甚至是奔潰，那麼咱們如何解決這個問題呢，讓輸入框在不在輸入的狀況下執行回調，或者每間隔一段時間執行一次回調均可以解決這一問題。而上述兩種方法，就叫作函數的節流和防抖。

二 函數節流和函數防抖

2.1 函數節流

函數節流：函數節流是讓這個函數在間隔某一段時間執行一次。以輸入框爲例，假設你想查詢xxxx,你想實現當我開始輸入多少秒以後，執行查詢操做。（並不必定要輸入完畢）
想看效果請點擊這裏

2.2 函數防抖

函數防抖：函數防抖是讓這個函數在執行上一次以後過了你規定的時間再執行的一種方法。以輸入框爲例，假設你要查詢xxxx，你想實現當我輸完了xxxx以後，再進行查詢操做，那麼你就須要用到函數防抖。
經典的函數防抖實踐以下：

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

想看效果請點擊這裏

三 最佳實踐

經過上敘的描述，咱們對於函數防抖和函數節流有了必定的認識。在這個項目中，我認爲函數節流和函數防抖都能很好的解決問題。因此這裏把函數節流和函數防抖封裝在了一個函數裏，經過第三個參數切換模式。代碼以下

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

經過第三個參數，能夠控制到底使用函數防抖仍是函數節流。

四 總結

函數防抖實現的核心在於每次都去clear一個延時器，而後每次執行函數的時候，都去clear之前的延時器。只有當你中斷輸入的時候，纔會去執行相應回調。而函數節流的核心是去判斷當前時間和開始時間的間隔是否到達了設置的delay值，若是達到了，就執行一次回調。沒有則不執行。