js--防抖與節流的使用

 

前言

　　防抖與節流是最常用的高頻觸發優化的方式，比如在開發中防止重復提交、在下拉加載更多的時候防止重復請求等問題。文本來總結下防抖與節流的區別及使用。

正文

　　1、防抖

　　防抖 (debounce): 將多次高頻操作優化為只在最后一次執行，通常使用的場景是：用戶輸入，只需再輸入完成后做一次輸入校驗即可。

　　實現代碼如下：

     /*
       防抖函數，執行函數被連續調用時，空閑的時間必須大於等於時間間隔wait ,func 才會執行
        func 表示回調函數
        wait  表示時間間隔
        immediate 表示是否立即執行
      */
      function debounce(func, wait, immediate) {
        let timer = null // 定時器
        let result = null
        return function (...params) {
          let context = this,
            now = immediate && !timer;
          // 在設置新的定時器之前要把之前的定時器銷毀，只需要在一定的時間間隔wait中執行一次
          clearTimeout(timer)
          timer = setTimeout(() => {
            timer = null
            if (!immediate) {
              result = func.apply(context, params)
            }
          }, wait);
          if (now) {
            result = func.apply(context, params)
          }
          return result
        }
      }

　　2、節流

　　節流(throttle): 每隔一段時間后執行一次，也就是降低頻率，將高頻操作優化成低頻操作，通常使用場景: 滾動條事件 或者 resize 事件，通常每隔 100~500 ms執行一次即可。

　　實現代碼如下：

      /*
      節流函數是為了減小執行頻率，當達到一定的時間間隔就會執行一次
      func 表示需要執行的函數
      wait 表示設置的時間間隔
      */
      function throttle(func, wait) {
        let timer = null // 定時器
        let result = null
        let previous = 0 // 之前的時間戳
        return function (...params) {
          let now = new Data()
          let context = this
          // remaining 用於判斷上次執行到本次執行的時間間隔是否超過了設置的時間間隔
          let remaining = wait - (now - previous)
          if (remaining <= 0) {
            // remaining <= 0 表示上次至此與本次的時間間隔已經超過了設置的時間間隔，
            // 可以執行回調了，並重置定時器 ，重新緩存本次的執行時間戳
            clearTimeout(timer)
            previous = now
            timer = null
            result = func.apply(context, params)
          } else if (!timer) {
            // 如果設置的時間間隔，且定時器為空，則等待剩余的間隔
            timer = setTimeout(() => {
              previous = now;
              timer = null;
              result = func.apply(context, params)
            }, remaining);
          }
          return result
        }
      }

　　3、區別

　　防抖和節流的作用都是防止函數多次調用，區別在於假設用戶一直觸發這個函數，且每次觸發的時間間隔小於 wait ,防抖情況下只會調用一次，而節流是每隔一定的時間間隔 wait 調用函數。防抖和節流本質不同，防抖是多次觸發事件，多次執行變為最后一次執行，節流是將多次觸發編程每隔一段時間執行。

寫在最后

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。