防抖与节流

这两个应该是前端在函数中非常经典且常见的用法了
接下来就简单介绍一下：

1.防抖

目的是为了避免多次重复触发该函数，有且仅有只触发最后一次事件，通俗讲就是点很多下，只触发你最后一次点的，前面的都作废。

应用场景：搜索框的输入后触发的自动搜索、窗口大小的变化......

 function debounce(fn, wait, immediate) {
    let timeout;
    return function () {
      let context = this;
      let args = arguments;
      if (timeout) {
        clearTimeout(timeout);
      }
      if (immediate) {
        let runNow = !timeout; //首次立即执行,然后当事件再次执行时才触发
        timeout = setTimeout(function () {
          timeout = null;
        }, wait);
        if (runNow) {
          fn.apply(context, args);
        }
      } else {
        timeout = setTimeout(function () {
          fn.apply(context, args);
        }, wait);
      }
    };
  }

2.节流

目的是为了控制触发的频率，有且仅有在规定时间内只触发第一次事件，通俗讲就是在自己设定的单位时间内，只触发首次点击的，接下来的点击都作废，必须等到下一个单位时间的到来。

应用场景：滚动加载、重复提交表单......

 function throttle(fn, deplay) {
    let timer = null; //记录上次的定时器
    let startTime = Date.now();
    return function () {
      let curTime = Date.now(); //当前时间
      let remain = deplay - (curTime - startTime); //距离下个单位时间还有多久
      let context = this;
      let args = arguments;
      clearTimeout(timer);
      if (remain <= 0) {
        fn.apply(context, args);
        startTime = Date.now();
      } else {
        timer = setTimeout(fn, remain);
      }
    };
  },