JavaScript函數防抖動debounce

2022-06-07 14:01:28

防抖動簡述

函數防抖動（debounce）：防止在短時間內過於頻繁的執行相同的任務。當短時間內的頻繁是不必要的時候，就可以考慮去抖動，避免資源浪費，或造成不好體驗。

函數防抖動的原理，主要是利用一次性定時器，延遲任務的執行，在延遲這段時間內，如果任務再次被觸發，則通過 clearTimeout 銷燬上一次產生的定時器，因為定時器的被銷燬，之前被延遲執行的任務也會隨之被取消執行。這樣就實現了在一定時間內，只執行一次任務。這一次的執行通常是最後一次的觸發，因為此前的觸發因為定時器的銷燬而被取消了。

多次觸發只執行最後一次或許就是和“節流”概念的區別？它兩在作用上挺像的，在具體實現上略有不同。函數防抖（debounce）是短時間內連續多次觸發，但只執行最後一次，即是說將多次執行變成了只執行最後一次，執行次數減少。而節流（throttle）是將短時間的多次執行，變成每隔一段時間執行一次。

防抖應用範例

1.防抖前後範例效果截圖

2.防抖範例完整 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖動 Demo</title>
</head>
<body>
<h1>防抖動 Demo</h1>

<label>
    <span>輸入暱稱：</span>
    <input oninput="inputChange(event.data)"></input>
</label>

<script>

  let timer = null

  function inputChange (data) {
    // 不做防抖動會頻繁觸發校驗，例如連續的輸入兩個字可能會觸發6-7次，
    // 這種頻繁程度可能不是必要的，當頻繁不是必要的，那麼就是資源的浪費。
    // validatePhone(data)

    // 防抖處理，連續正常的輸入同樣的兩個字，只會觸發一次校驗任務。
    clearTimeout(timer)
    timer = setTimeout(() => {
      validatePhone(data)
    }, 1000)
  }

  function validatePhone (data) {
    let flag = true
    const regPhone = /^1d{10}$/
    if (!regPhone.test(data)) {
      flag = false
      console.log('校驗內容：' + data + '。手機號不正確，請輸入1開頭的11位手機號')
    }
    return flag
  }
</script>
</body>
</html>

防抖動的應用場景

當任務在短時間內被頻繁執行，而這種頻繁不是必要的，或不是想要的，就可以考慮使用防抖。下面是一些場景例子：

①監聽卷軸實現左側內容和右側導航關聯，卷軸的頻繁程度很高，而這種頻繁程度可能不是我們想要的，此時就可以考慮使用防抖。

例如我在 JavaScript實現內容捲動與導航標籤互動關聯方案中就使用了防抖。

// 監聽卷軸
window.addEventListener("scroll", function (e) {
  // 防抖動處理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

②表單輸入的一些監聽事件，例如 oninput 等。

③一些元件庫的內容變化監聽，例如 el-tree 的 @check-change 事件，當選擇祖先級的選項時，因為包含了選中其子孫項，@check-change 會被頻繁觸發，如果這個選項變化關聯介面，那麼這種頻繁可能不是必要的。

下面是一個範例：

    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      @check-change="handleCheckChange">
    </el-tree>

handleCheckChange (data, checked, indeterminate) {
  // 簡單的防抖動處理
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    let checkedKeys = this.$refs.tree.getCheckedKeys()
    // 處理相關業務，例如根據選中的條件，觸發介面查詢
    // this.$emit('checkChange', checkedKeys.join(';'))
  }, 300)
},

④監聽瀏覽器視窗變化 window.onresize，例如在 echarts 的應用中，預設瀏覽器視窗大小改變 echarts 檢視佈局是不會做響應式改變的，那麼就需要通過監聽瀏覽器視窗大小改變然後去重置 echarts 實現佈局的改變。實踐發現，調整一下瀏覽器視窗大小，會非常多次觸發 onresize，但如果我們也跟著去多次重置 echarts.resize()，這不僅不是必要的，而且還會造成閃爍頻繁，卡頓等不好的體驗，以及效能浪費。此時適合用防抖動處理。

下面是一個範例：

// 裝置視口大小改變時，重置 echarts
let timer = null
window.onresize = function () {
  // 簡單的防抖動處理
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log(timer)
    chart.resize()
  }, 500)
}

也可以考慮使用閉包的方式，而不必在外面宣告 timer，例如這樣

// 也可以考慮用閉包的方式
window.onresize = this.debounce(() => {
  chart.resize()
}, 500)

function debounce (fn, delay = 1000) {
  let timer = null
  return () => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(fn, delay)
  }
}

⑤滑鼠事件，例如拖拽等的監聽等，出於準確性和及時性，他們的監聽響應十分細密，而當這種頻繁在業務上可能不是必要的，那麼也可以考慮使用防抖動技術。

到此這篇關於JavaScript函數防抖動debounce的文章就介紹到這了,更多相關JS防抖動內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！