JS 函數節流和去抖

時間 2019-12-11

原文原文鏈接

一、什麼是節流和去抖？瀏覽器

　　節流。就是擰緊水龍頭讓水少流一點，可是不是不讓水流了。想象一下在現實生活中有時候咱們須要接一桶水，接水的同時不想一直站在那等着，可能要離開一會去幹一點別的事請，讓水差很少流滿一桶水的時候再回來，這個時候，不能把水龍頭開的太大，否則還沒回來水就已經滿了，浪費了好多水，這時候就須要節流，讓本身回來的時候水差很少滿了。那在JS裏有沒有這種狀況呢，典型的場景是圖片懶加載監聽頁面的scoll事件，或者監聽鼠標的mousemove事件，這些事件對應的處理方法至關於水，因爲scroll和mousemove在鼠標移動的時候會被瀏覽器頻繁的觸發，會致使對應的事件也會被頻繁的觸發（水流的太快了），這樣就會形成很大的瀏覽器資源開銷，並且好多中間的處理是沒必要要的，這樣就會形成瀏覽器卡頓的現象，這時候就須要節流，如何節流呢？咱們沒法作到讓瀏覽器不去觸發對應的事件，可是能夠作到讓處理事件的方法執行頻率減小，從而減小對應的處理開銷。網絡

　　去抖。最先接觸這個詞應該是在高中物理裏面學到的，有時候開關在在真正閉合以前可能會發生一些抖動現象，若是抖動的明顯的話，對應的小燈泡可能會閃爍，把燈泡閃壞了不重要，萬一把眼睛再給閃壞了可就麻煩了，這個時候就有去抖電路的出現。而在咱們的頁面裏，也有這種狀況，假設咱們的一個輸入框，輸入內容的同時可能會去後臺查詢對應的聯想詞，若是用戶輸入的同時，頻繁的觸發input事件，而後頻繁的向後擡發送請，那麼直到用戶輸入完成時，以前的請求都應該是多餘的，假設網絡慢一點，後臺返回的數據比較慢，那麼顯示的聯想詞可能會出現頻繁的變換，直到最後的一個請求返回。這個時候就能夠在必定時間內監聽是否再次輸入，若是沒有再次輸入則認爲本次輸入完成，發送請求，不然就是斷定用戶仍在輸入，不發送請求。閉包

　　去抖和節流是不一樣的，由於節流雖然中間的處理函數被限制了，可是隻是減小了頻率，而去抖則把中間的處理函數所有過濾掉了，只執行規斷定時間內的最後一個事件。app

二、JS實現。函數

　　前面BB了這麼多，感謝你耐心的看到這裏，接下來咱們來本身動手看看如何實現節流和去抖。this

　　節流： spa

    /** 實現思路：
    **  參數須要一個執行的頻率，和一個對應的處理函數,
    **  內部須要一個lastTime 變量記錄上一次執行的時間
    **/ function throttle (func, wait) {
      let lastTime = null
　　　　// 爲了不每次調用lastTime都被清空，利用js的閉包返回一個function確保不生命全局變量也能夠
      return function () {
        let now = new Date()
        // 若是上次執行的時間和此次觸發的時間大於一個執行週期，則執行
        if (now - lastTime - wait > 0) {
          func()
          lastTime = now
        }
      }
    }

再看如何調用：code

// 因爲閉包的存在，調用會不同
let throttleRun = throttle(() => {
    console.log(123)
}, 400)

window.addEventListener('scroll', throttleRun)

這時候f瘋狂的滾動頁面，會發現會400ms打印一個123，而沒有節流的話會不斷地打印，你能夠改變wait參數去感覺下不一樣。對象

可是到這裏，咱們的節流方法是不完善的，由於咱們的方法沒有獲取事件發生時的this對象，並且因爲咱們的方法簡單粗暴的經過判斷此次觸發的時間和上次執行時間的間隔來決定是否執行回調，這樣就會形成最後一次觸發沒法執行，或者用戶出發的間隔確實很短，也沒法執行，形成了誤殺，因此須要對方法進行完善。blog

　　function throttle (func, wait) {
      let lastTime = null
      let timeout
      return function () {
        let context = this
        let now = new Date()
        // 若是上次執行的時間和此次觸發的時間大於一個執行週期，則執行
        if (now - lastTime - wait > 0) {
          // 若是以前有了定時任務則清除
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          func.apply(context, arguments)
          lastTime = now
        } else if (!timeout) {
          timeout = setTimeout(() => {
            // 改變執行上下文環境
            func.apply(context, arguments)
          }, wait)
        }
      }
    }

這樣咱們的方法就相對完善了，調用方法和以前相同。

　　去抖：

　　去抖的方法，和節流思路一致，可是隻有在抖動被斷定結束後，方法纔會獲得執行。

   debounce (func, wait) {
      let lastTime = null
      let timeout
      return function () {
        let context = this
        let now = new Date()
        // 斷定不是一次抖動
        if (now - lastTime - wait > 0) {
          setTimeout(() => {
            func.apply(context, arguments)
          }, wait)
        } else {
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          timeout = setTimeout(() => {
            func.apply(context, arguments)
          }, wait)
        }
        // 注意這裏lastTime是上次的觸發時間
        lastTime = now
      }
    }