防抖与节流

防抖与节流

简介

函数防抖(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会很是的浪费资源,防抖能够解决这个问题
节流
节流的应用场景也不少,例如单击事件,我频繁的点击按钮,但我只但愿在规定时间内只有一次的有效操做,还有滚动条滚到底部的自动加载更多等