防抖&节流

实际项目中经常会遇到一些函数的频繁重复调用，例如input搜索、用户频繁点击登录按钮、页面滚动至一定高度的scroll回调、窗口resize等消耗性能或频繁发送多余请求的操作，防抖以及节流可以有效的优化类似操作产生的性能消耗。

防抖

防抖可以简单的理解为当函数在一定时间内被频繁重复调用时只执行最后一次调用，通常用于针对一些不可预知的用户操作，例如用户重复快速点击登录按钮进行登录，只需在用户最后一次点击登录后执行登录相关逻辑即可。

• 代码如下：

  /**
   * @param fn: 需要进行防抖操作的方法
   * @param delay: 禁止重复触发的时间间隔 单位ms
   */
  function debounce(fn, delay) {
    let timer = null;
    return () => {
      // 如果定时器存在则证明重复触发，需清除定时器开始重新计时
      if(timer) {
        clearTimeout(timer);
      }
      setTimeout(() => {
        fn.apply(this, arguments); // 注意apply arguments是类数组 fn([a,b,c])语义就变了 应该是fn(a,b,c)
        timer = null; // 执行完毕后重置timer为null
      }, delay);
    }
  }

节流

节流可以简单的理解为在我们规定的时间段内函数只执行一次，通常针对一些我们可以预知的会产生频繁重复的函数调用，例如滑动滚动条触发的scroll回调，无需频繁触发，我们可以规定每300ms执行一次即可。

• 代码如下：

  /**
   * @param fn: 需要进行节流操作的方法
   * @param delay: 规定函数执行的时间间隔 单位ms
   */
  function throttle(fn, delay) {
    let timer = null
    return () => {
      // 如果定时器存在则证明没有还没有到达规定的时间间隔，直接return
      if(timer) return;
      // 规定delay时间间隔后执行fn
      timer = setTimeout(() => {
        fn.apply(fn, arguments);
        timer = null;
      }, delay);
    }
  }