函數的防抖和節流是個啥？？？

edagarli 發布于2019-08-23 18:35 / 1919人閱讀

摘要：函數防抖和節流，都是控制事件觸發頻率的方法。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調傳進去，等待一段時間過后執行目標函數第二點實現了，再看第一點持續觸發不執行。

曾經面試時候被問到過這個，年少的我一臉無知。。。

后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的utils里加上了防抖函數。
正好做一個總結，加深印象。

函數防抖和節流，都是控制事件觸發頻率的方法。應用場景有很多，輸入框持續輸入，將輸入內容遠程校驗、多次觸發點擊事件、onScroll等等。
為了說明問題，假設一個場景：鼠標滑過一個div，觸發onmousemove事件，它內部的文字會顯示當前鼠標的坐標。

效果是這樣的：

在上邊的場景下，我們不希望觸發一次就執行一次，這就要用到防抖或節流。下面我們看一下它們能為我們做什么吧。

防抖

函數防抖，這里的抖動就是執行的意思，而一般的抖動都是持續的，多次的。假設函數持續多次執行，
我們希望讓它冷靜下來再執行。也就是當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的
一段時間之后，再去執行。先看一下效果：

分解一下需求：

持續觸發不執行

不觸發的一段時間之后再執行

那么怎么實現上述的目標呢？我們先看這一點：在不觸發的一段時間之后再執行，那就需要個定時器呀，定時器里面調用我們要執行的函數，將arguments傳入。
封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調（func）傳進去，等待一段時間過后執行目標函數

function debounce(func, delay) {
  return function() {
    setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

第二點實現了，再看第一點：持續觸發不執行。我們先思考一下，是什么讓我們的函數執行了呢？是上邊的setTimeout。OK，那現在的問題就變成了
持續觸發，不能有setTimeout。這樣直接在事件持續觸發的時候，清掉定時器就好了。

function debounce(func, delay) {
  let timeout
  return function() {
    clearTimeout(timeout) // 如果持續觸發，那么就清除定時器，定時器的回調就不會執行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

用法：

  box.onmousemove = debounce(function (e) {
    box.innerHTML = `${e.clientX}, ${e.clientY}`
  }, 1000)

節流

節流的意思是讓函數有節制地執行，而不是毫無節制的觸發一次就執行一次。什么叫有節制呢？就是在一段時間內，只執行一次。
同樣，我們分解一下：

持續觸發并不會執行多次

到一定時間再去執行

效果是這樣的：

思考一下，持續觸發，并不會執行，但是到時間了就會執行。抓取一個關鍵的點：就是執行的時機。
要做到控制執行的時機，我們可以通過一個開關，與定時器setTimeout結合完成。

函數執行的前提條件是開關打開，持續觸發時，持續關閉開關，等到setTimeout到時間了，再把開關打開，函數就會執行了。
我們看一下代碼怎么實現：

  function throttle(func, deley) {
    let run = true
    return function () {
      if (!run) {
        return  // 如果開關關閉了，那就直接不執行下邊的代碼
      }
      run = false // 持續觸發的話，run一直是false，就會停在上邊的判斷那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定時器到時間之后，會把開關打開，我們的函數就會被執行
      }, deley)
    }
  }

調用的時候：

box.onmousemove = throttle(function (e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`
}, 1000)

這樣，就實現了節流，節流還可以用時間間隔去控制，就是記錄上一次函數的執行時間，與當前時間作比較，如果當前時間與上次執行時間的時間差大于一個值，就執行。

說明一下節流時，后面操作中應該是因為run=false 所以才直接return，但是不是在return之前let run=ture直接覆蓋掉之前的false

這里可以看一下throttle函數內部，和函數調用的時候。首先看函數內部，分解一下結構：

function throttle(func, deley) {
    return function () {
      // 執行func
    }
}

那調用時候呢？也分解一下：

throttle(function () { // 目標函數內容 }, 1000)

這里throttle函數執行的結果是其內部return的function的調用。也就是說鼠標經過的事件監聽實際上是這個被return的function，不斷持續觸發的是它，而throttle函數只是提供了一個作用域，內部用閉包聲明了一個run的開關變量，由于閉包的存在，run這個變量會一直存在不被銷毀，而let run = true只在這個閉包（可以理解為作用域）內只聲明了一次，但它不會被持續執行，所以return的函數內部的判斷不會被它覆蓋掉。根據打印結果可以看出，事實確實是如此：

總結

防抖和節流巧妙地用了setTimeout，來控制函數執行的時機，優點很明顯，可以節約性能，不至于多次觸發復雜的業務邏輯而造成頁面卡頓。

歡迎關注我的公眾號： 一口一個前端，不定期分享我所理解的前端知識

云服務器 GPU云服務器 php是個啥阿里云是個啥 VUE防抖與節流函數節流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105490.html

從lodash源碼學習節流與防抖

摘要：首先重置防抖函數最后調用時間，然后去觸發一個定時器，保證后接下來的執行。這就避免了手動管理定時器。 ??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調整瀏覽器可視區大小，會引發圖形重繪。當圖中的節點比較多的時候，頁面會顯得異常卡頓。為了限制類似于這種短時間內高頻率觸發的情況，我們可以使用防抖函數。 ??實際開發過程中，這樣的情況其實很多，比如：頁面的scroll事件 ...

CloudDeveloper 2019-08-26 11:59 評論0 收藏0
函數的防抖和節流

摘要：當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的一段時間之后，再去執行原理第一次調用函數創建一個定時器，指定的時間間隔后運行代碼。第二次調用函數時，它會清除前一次的定時器并設置另一個。目的：節約性能開銷，避免多次頻繁的觸發業務邏輯造成頁面卡頓。應用場景：節流和防抖的核心其實就是限制某一個方法被頻繁觸發，比如說DOM事件的監聽回調，input的keyup、keydown...

MasonEast 2019-08-26 14:00 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

andong777 2019-08-30 15:56 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

LeexMuller 2019-08-26 13:35 評論0 收藏0