JS代码防抖实现以及施工注意事项

1.防抖

防抖原理：
原则参考Nan，文章
事件响应函数在一段时间后执行，如果在此期间再次调用，则重新计算执行时间。可以理解setTimeout在一定的时间间隔内，多个触发器被转换为一个触发器。

应用场景：

scroll时间滚动触发器
搜索框输入查询
表单验证
按钮提交事件
浏览器窗口缩放

代码实现 可以参考B站Up主： 小野森森

  test() {
    console.log(1);
  }
  div.onmouseover = debounce(test); // test 是我们的回调函数之一
  // 三个参数是:1.传入的函数， 2.Time追赶3.True首次不合规延迟
  function debounce (fn, time, triggleNow) { 
    let t = null;
    var debounced = function () {
      var _self = this,
      args = arguments;
      // 如果t存在， 让我们清空计时器
      if(t){
        clearTimeOut(t);
      }
      // 第一次没有延迟， 直接运行的分支
      if(triggleNow){
        var exec = !t;
        // t = 的是setTimeOut的地址， 就算clear了也不是null
        t = setTimeOut(function() {
          t = null;
        },time);
        if(exec){
          fn.apply(_self, args);
        }
      }
      // 所有生物都是平等的， 都要延时
      else{
        t = setTimeOut(function() {
          fn.apply(_self, args);
        },time);
      }
    }
    debounced.remove = function() {
      clearTimeOut(t);
      t = null;
    }
    return debounced;
  }