什么是函数防抖？

1，什么是防抖？

防抖函数就是在函数需要频繁触发的情况时，只有足够空闲时间，才执行一次。类是于公交车在站台上，乘客上车，当最后一个乘客上车后进行计时，一段时间内，如果有乘客上车，就重新计时，直至计时时间内没乘客上车了，就发车。

普遍用于搜索框：

没有进行函数防抖：

<input type="text" id='app'></inpue>
<script>
  var oInp = document.getElementById('app');
  function ajax () {
    console.log(this.value);
  }
  oInp.oninput = ajax;
</script>

当我们每输入一个字符就会进行打印，这肯定不是我们想要的，我们要的结果是打印最后结果即可，此时就需要进行函数防抖

<input type="text" id='app'></input>
<script>
  var oInp = document.getElementById('app');
  var timer = null;
  function ajax (e) {
    console.log(e, this.value);
  }
  oInp.oninput = function (e) {
    var _self = this, _arg = arguments;
    clearTimeout(timer);
    timer = setTimeout(function (){
      ajax.apply(_self, _arg);
    }, 1000);
  };
</script>

我们在开发项目的时候就有必要封装一个防抖函数

function debounce (handler, delay) { //handler，需要进行防抖的函数；delay，执行handler函数的间隔时间
  var timer = null;
  return function () {
    var _self = this, _arg = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      handler.apply(_self, _arg);
    }, delay);
  }
}

例如：
 

<input type="text" id='app'></input>
<script>
  var oInp = document.getElementById('app');
  function debounce (handler, delay) {
    var timer = null;
    return function () {
      var _self = this, _arg = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        handler.apply(_self, _arg);
      }, delay);
    }
  };
  function ajax (e) {
    console.log(e, this.value);
  };
  oInp.oninput = debounce(ajax, 2000);
</script>