js-防抖和节流

核心要点

• 什么是防抖及实现方式？
• 什么是节流及实现方式？

1、什么是防抖及实现方式？

• 防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

• 实现方式：

  export function onDeb(fn, delay = 300) {
      let timer;
      return function () {
          clearTimeout(timer);
          let context = this;
          let args = arguments; 
          timer = setTimeout(function () {
              fn.call(context, args);
          }, delay);
      };
  }
  
  

2、什么是节流及实现方式？

• 节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

• 实现方式：

  export function onThro(fn, delay = 300) {
      let enterTime = 0;//触发的时间
      return function () {
          let context = this;
          let backTime = new Date();//第一次函数return即触发的时间
          if (backTime - enterTime > delay) {
              fn.call(context, arguments);
              enterTime = backTime; 
          }
      };
  }