JavaScript中的高阶函数

节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

函数执行后需要过一定时间才能执行 业务场景：一个按钮快速点击，但是限制他1s执行一次 抽象理解：函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹

var throttle = function (fn, interval) {
  var timer = null;
  var firstTime = true;

  return function () {
    var args = arguments;

    if (firstTime) {
      fn.apply(this, args);
      return (firstTime = false);
    }
    if (timer) {
      return false;
    }
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      fn.apply(this, args);
    }, interval || 500);
  };
};

防抖函数

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

函数在一定时间内只执行一次 业务场景：点击提交按钮时，用户快速点击提交按钮，但是只有在过了一定时间才执行 抽象理解：函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。

var debounce = function (fn, interval) {
  var timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      clearTimeout(timer);
      timer = null;
    }, interval || 500);
  };
};

分时函数

当需要操作很多数据时，把这些操作分成一定时间内执行一些数据

函数将大量数据一次操作分为少量数据多次操作 业务场景：你需要往页面新增1000个dom,一次性增加会增大浏览器渲染负担，会导致浏览器卡顿，这时可以将1000个dom分为每200ms添加10个，减小浏览器渲染负担

var timeChunk = function (ary, fn, count) {
  var obj = null;
  var t = null;
  var start = function () {
    for (let i = 0; i < Math.min(count || 1, ary.length); i++) {
      obj = ary.shift();
      fn(obj);
    }
  };
  return function () {
    t = setInterval(() => {
      if (ary.length === 0) {
        return clearInterval(t);
      }
      start();
    }, 200);
  };
};

惰性加载函数

在一次惰性加载后，就不在进行分支语句操作

业务场景：封装在各个浏览器中能够通用的事件绑定函数addEvent 普通封装

var addEvent = function( elem, type, handler ){ 
    if ( window.addEventListener ){ 
       return elem.addEventListener( type, handler, false ); 
      } 
    if ( window.attachEvent ){ 
        return elem.attachEvent( 'on' + type, handler ); 
      } 
};

缺点：当它每次被调用的时候都会执行里面的 if 条件分支，虽然执行这些 if 分支的开销不算大，但也许有一些方法可以让程序避免这些重复的执行过程 使用惰性加载函数思想封装

var addEvent = function (elem, type, handler) {
  if (window.addEventListener) {
    addEvent = function (elem, type, handler) {
      elem.addEventListener(type, handler, false);
    };
  } else if (window.attachEvent) {
    addEvent = function (elem, type, handler) {
      elem.attachEvent("on" + type, handler);
    };
  }
  addEvent(elem, type, handler);
};

区别：在第一次进入条件分支之后，在函数内部会重写这个函 数，重写之后的函数就是我们期望的addEvent 函数，在下一次进入addEvent 函数的时候，addEvent函数里不再存在条件分支语句