前端优化 ----防抖 节流

防抖

如果一个事件在短时间内连续触发，则只去执行最后一次。 控制频率

• 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
• 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

•  /** 
  * @desc 函数防抖 
  * @param func 回调函数 
  * @param delay 延迟执行毫秒数 
  */ 
  function _debounce(func, delay) { 
      let timer;  // 定时器
  
      return function () { 
          let context = this;  // 记录 this 值,防止在回调函数中丢失
          let args = arguments;  // 函数参数
          
          // 标识是否立即执行
          let isImmediately = !timer;
  
          //如果定时器存在，则清除定时器(如果没有,也没必要进行处理)
          timer ? clearTimeout(timer) : null; 
  
          timer = setTimeout(() => { 
              timer = null;
          }, delay);
          
          // isImmediately 为 true 则 执行函数(即首次触发事件)
          isImmediately ? func.apply(context, args) : null;
      } 
  } 

  节流

  使一个函数在固定时间内只执行一次。控制次数

• 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

• //节流throttle代码：
  function throttle(fn,delay) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
           // 在函数开头判断标记是否为true，不为true则return
          if (!canRun) return;
           // 立即设置为false
          canRun = false;
          // 将外部传入的函数的执行放在setTimeout中
          setTimeout(() => { 
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
          // 当定时器没有执行的时候标记永远是false，在开头被return掉
              fn.apply(this, arguments);
              canRun = true;
          }, delay);
      };
  }
   
  function sayHi(e) {
      console.log('节流：', e.target.innerWidth, e.target.innerHeight);
  }
  window.addEventListener('resize', throttle(sayHi,500));