防抖與節流

防抖與節流

簡介

函數防抖(debounce)

在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時。

函數節流(throttle)

規定在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效。

---

先看一個例子

<div
  style={{
    height: '1000px',
    width: '1000px',
  }}
>
  <div>
    普通input: <input id="normal" />
  </div>
  <div>
    防抖input: <input id="debounce" />
  </div>
  <div>
    節流input: <input id="throttle" />
  </div>
</div>

<script type="text/javascript">

  // 普通的
  function ajax1( content) {
    console.log('我是普通的input: ' + content)
  }

  let inputa = document.getElementById('normal')

  inputa.addEventListener('keyup', function (e) {
      ajax(e.target.value)
  })


</script>

這是一個普通的input輸入框,綁定了一個keyUp事件,他鍵盤每次輸入一次就會觸發一次事件,在實際的場景中咱們並不須要渲染這麼屢次,下面就該介紹一下咱們此次要說的防抖和節流

防抖

// 防抖
  function ajax2( content) {
    console.log('我是防抖的input: ' + content)
  }

  function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
  }

  let inputb = document.getElementById('debounce')  

  let debounceAjax = debounce(ajax2, 500)

  inputb.addEventListener('keyup', function (e) {
    debounceAjax(e.target.value)
  })

從圖中能夠看出,我用小鍵盤連續輸入了1至8可是他只打印了一次,說明在我在指定間隔內沒有輸入纔會觸發事件,若是中止輸入可是在指定間隔內再次輸入,又會從新觸發計時

節流

// 節流
  function ajax3( content) {
    console.log('我是節流的input: ' + content)
  }

  function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }

    let throttleAjax = throttle(ajax3, 1000)

    let inputc = document.getElementById('throttle')
    inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value)
    })

從圖中能夠看出,我在不斷快速不斷的輸入1,可是ajax3會按照咱們設定的時間去執行,無論我輸入的多頻繁,他都會每1000ms打印一次

---

總結

防抖
防抖的應用場景不少,例如查詢框,我須要輸入一個完整的關鍵詞自動去查詢,若是我每輸入一個字就調用api會很是的浪費資源,防抖能夠解決這個問題
節流
節流的應用場景也不少,例如單擊事件,我頻繁的點擊按鈕,但我只但願在規定時間內只有一次的有效操做,還有滾動條滾到底部的自動加載更多等