欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript函數(shù)防抖動(dòng)debounce

 更新時(shí)間：2022年06月07日 10:19:50   作者：??靈扁扁  
這篇文章主要介紹了JavaScript函數(shù)防抖動(dòng)debounce，防抖動(dòng)作用防止在短時(shí)間內(nèi)過于頻繁的執(zhí)行相同的任務(wù)，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下

防抖動(dòng)簡(jiǎn)述

函數(shù)防抖動(dòng)（debounce）：防止在短時(shí)間內(nèi)過于頻繁的執(zhí)行相同的任務(wù)。 當(dāng)短時(shí)間內(nèi)的頻繁是不必要的時(shí)候，就可以考慮去抖動(dòng)，避免資源浪費(fèi)，或造成不好體驗(yàn)。

函數(shù)防抖動(dòng)的原理，主要是利用一次性定時(shí)器，延遲任務(wù)的執(zhí)行，在延遲這段時(shí)間內(nèi)， 如果任務(wù)再次被觸發(fā)，則通過 clearTimeout 銷毀上一次產(chǎn)生的定時(shí)器， 因?yàn)槎〞r(shí)器的被銷毀，之前被延遲執(zhí)行的任務(wù)也會(huì)隨之被取消執(zhí)行。 這樣就實(shí)現(xiàn)了在一定時(shí)間內(nèi)，只執(zhí)行一次任務(wù)。這一次的執(zhí)行通常是最后一次的觸發(fā)， 因?yàn)榇饲暗挠|發(fā)因?yàn)槎〞r(shí)器的銷毀而被取消了。

多次觸發(fā)只執(zhí)行最后一次或許就是和“節(jié)流”概念的區(qū)別？它兩在作用上挺像的，在具體實(shí)現(xiàn)上略有不同。 函數(shù)防抖（debounce）是短時(shí)間內(nèi)連續(xù)多次觸發(fā)，但只執(zhí)行最后一次，即是說將多次執(zhí)行變成了只執(zhí)行最后一次，執(zhí)行次數(shù)減少。 而節(jié)流（throttle）是將短時(shí)間的多次執(zhí)行，變成每隔一段時(shí)間執(zhí)行一次。

防抖應(yīng)用示例

1.防抖前后示例效果截圖

2.防抖示例完整 demo

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

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

<script>

  let timer = null

  function inputChange (data) {
    // 不做防抖動(dòng)會(huì)頻繁觸發(fā)校驗(yàn)，例如連續(xù)的輸入兩個(gè)字可能會(huì)觸發(fā)6-7次，
    // 這種頻繁程度可能不是必要的，當(dāng)頻繁不是必要的，那么就是資源的浪費(fèi)。
    // validatePhone(data)

    // 防抖處理，連續(xù)正常的輸入同樣的兩個(gè)字，只會(huì)觸發(fā)一次校驗(yàn)任務(wù)。
    clearTimeout(timer)
    timer = setTimeout(() => {
      validatePhone(data)
    }, 1000)
  }

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

防抖動(dòng)的應(yīng)用場(chǎng)景

當(dāng)任務(wù)在短時(shí)間內(nèi)被頻繁執(zhí)行，而這種頻繁不是必要的，或不是想要的，就可以考慮使用防抖。 下面是一些場(chǎng)景例子：

①監(jiān)聽滾動(dòng)條實(shí)現(xiàn)左側(cè)內(nèi)容和右側(cè)導(dǎo)航關(guān)聯(lián)，滾動(dòng)條的頻繁程度很高， 而這種頻繁程度可能不是我們想要的，此時(shí)就可以考慮使用防抖。

例如我在 JavaScript實(shí)現(xiàn)內(nèi)容滾動(dòng)與導(dǎo)航標(biāo)簽互動(dòng)關(guān)聯(lián)方案中就使用了防抖。

// 監(jiān)聽滾動(dòng)條
window.addEventListener("scroll", function (e) {
  // 防抖動(dòng)處理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

②表單輸入的一些監(jiān)聽事件，例如 oninput 等。

③一些組件庫的內(nèi)容變化監(jiān)聽，例如 el-tree 的 @check-change 事件， 當(dāng)選擇祖先級(jí)的選項(xiàng)時(shí)，因?yàn)榘诉x中其子孫項(xiàng)，@check-change 會(huì)被頻繁觸發(fā)， 如果這個(gè)選項(xiàng)變化關(guān)聯(lián)接口，那么這種頻繁可能不是必要的。

下面是一個(gè)示例：

    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      @check-change="handleCheckChange">
    </el-tree>
handleCheckChange (data, checked, indeterminate) {
  // 簡(jiǎn)單的防抖動(dòng)處理
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    let checkedKeys = this.$refs.tree.getCheckedKeys()
    // 處理相關(guān)業(yè)務(wù)，例如根據(jù)選中的條件，觸發(fā)接口查詢
    // this.$emit('checkChange', checkedKeys.join(';'))
  }, 300)
},

④監(jiān)聽瀏覽器窗口變化 window.onresize，例如在 echarts 的應(yīng)用中， 默認(rèn)瀏覽器窗口大小改變 echarts 視圖布局是不會(huì)做響應(yīng)式改變的， 那么就需要通過監(jiān)聽瀏覽器窗口大小改變?nèi)缓笕ブ刂?echarts 實(shí)現(xiàn)布局的改變。 實(shí)踐發(fā)現(xiàn)，調(diào)整一下瀏覽器窗口大小，會(huì)非常多次觸發(fā) onresize， 但如果我們也跟著去多次重置 echarts.resize()，這不僅不是必要的， 而且還會(huì)造成閃爍頻繁，卡頓等不好的體驗(yàn)，以及性能浪費(fèi)。此時(shí)適合用防抖動(dòng)處理。

下面是一個(gè)示例：

// 設(shè)備視口大小改變時(shí)，重置 echarts
let timer = null
window.onresize = function () {
  // 簡(jiǎn)單的防抖動(dòng)處理
  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)
  }
}

⑤鼠標(biāo)事件，例如拖拽等的監(jiān)聽等，出于準(zhǔn)確性和及時(shí)性， 他們的監(jiān)聽響應(yīng)十分細(xì)密，而當(dāng)這種頻繁在業(yè)務(wù)上可能不是必要的，那么也可以考慮使用防抖動(dòng)技術(shù)。

到此這篇關(guān)于JavaScript函數(shù)防抖動(dòng)debounce的文章就介紹到這了,更多相關(guān)JS防抖動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論