节流与防抖函数的实现

1.防抖

一个事件频繁触发时 通过setTimeout延迟执行将handler延后 再次触发时则清空timer
使得当事件连续触发时间间隔在times内 则只执行一次， 具体如下：

// options.head 首次触发是否执行
// options.tail 末次触发是否执行
const debounce  = (fn, times = 1000, context, options = { head: false, tail: true }) => {
  let timer = null;
  let isFirst = true;

  return (...args) => {
    clearTimeout(timer);
   
    if (options.head && isFirst) {
      fn.apply(context || this, args);
      isFirst = false;
    }
    
    timer = setTimeout(() => {
      if (options.tail) {
        fn.apply(context || this, args);
      }
      isFirst = true;
    }, times);
  };
};

2.节流

事件开始之前设置一个开始时间 在触发的时候将当前时间与之对比 如果达到 则执行 并将开始时间（上次执行时间）重置为当前时间 否则 延迟触发 但在每次触发时需清除timer 使得最后一次触发必将执行
使得当事件连续触发 间隔固定时间执行一次

  // options.head 首次触发是否执行
  // options.tail 末次触发是否执行
  const throttle = (fn, times = 1000, context, options = { head: false, tail: true }) => {
    let timer = null;
    let _timer = null;
    let startTime = 0;
    let isFirst = true;
    
    return (...args) => {
      const crtTime = +new Date();
      if (startTime === 0) {
        startTime = +new Date();
      }
      clearTimeout(timer);
      clearTimeout(_timer);      

      if (options.head && isFirst) {
        fn.apply(context || this, args);
        isFirst = false;
      }

      if (crtTime - startTime >= times && startTime !== 0) {
        fn.apply(context || this, args);
        startTime = crtTime;
      } else {
        if (options.tail) {
          timer = setTimeout(() => {
            fn.apply(context || this, args);
          }, times - (crtTime - startTime));
        }
      }

      _timer = setTimeout(() => {
        isFirst = true;
        startTime = 0;
      }, times);
    };
  };

3.总结

需要在触发事件的最后一次中将isFirst重置为true。实际上节流函数结合了防抖函数，节流函数的最后一次触发即防抖函数的基本实现。

纯属自我yy实现，如果不妥，忘指正，不胜感激。