JS中的函数防抖及实现

1.什么是函数防抖

概念：函数防抖（debounce）是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

2.什么时候会使用函数防抖

前端开发过程中有一些事件onresize,scroll,mousemove 等等，在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次，那不仅会浪费计算机资源，还会降低程序运行速度，严重的话甚至造成浏览器卡死、崩溃，这种问题显然是致命的。所以需要我们去减少不必要的执行次数。

3.代码实现

/**
 * 防抖
 * @param { Function } fn 执行函数
 * @param { Number } time 延迟时间
 * @param { Boolean } trggleNow 立即触发
 */
function debounce (fn, time, trggleNow) {
  var t = null;

  var debounced = function () {
    var _self = this,
        args = arguments;
    
    if (t) {
      clearTimeout(t);
    }

    if (trggleNow) {
      var exec = !t;

      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;
}