JS函数防抖实现以及原理

1.防抖

防抖原理：
原理参考楠丶的文章
事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间。可理解为通过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;
  }