防抖和节流

防抖

用一句话来表述，只要用户没有停止当前行为，就不会处理事件。【比如只要用户鼠标还在滑动，就不会将每一次滑动事件都去执行。】

// 三个参数分别是 经过防抖处理的函数，延迟时间，是否立即执行，希望传递给 fn 的参数列表
let  debounce = function (fn, delay = 300, start = true, ...arg) {
    if (typeof fn !== "function") {
      return;
    }

    let timer = null;
    return function () {
      let that = this;
      clearTimeout(timer);
      timer = setTimeout(
        () => {
          fn.apply(that, [...arg]);
          start = false;
        },
        start ? 0 : delay
      );
    };
  };

节流

用一句话来表述，要求用户在指定的时间间隔执行 【比如鼠标滑动事件，我们并不需要处理每一次的鼠标滑动，一般每个几百毫秒处理一次】

  // 三个参数分别是 经过节流处理的函数，延迟时间，是否立即执行，希望传递给 fn 的参数列表
  let throttle = function (fn, delay = 300, start = true, ...arg) {
    if (typeof fn !== "function") {
      return;
    }

    let timer = 0;

    return function () {
      let that = this;
      if (timer) {
        return;
      }

      timer = setTimeout(
        () => {
          fn.apply(that, [...arg]);
          start = false;
          timer = false;
        },
        start ? 0 : delay
      );
    };
  };