防抖与节流

防抖：

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

节流：

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

代码实现节流

只要触发，就用 Date 获取现在的时间，与上一次的时间比较。

• 如果时间差大于了规定的等待时间，就可以执行一次；
  • 目标函数执行以后，就更新 previous 值，确保它是“上一次”的时间。
• 否则就等下一次触发时继续比较。

•   function throttle(func, wait) {
  
      let previous = 0;
  
      return function() {
          let now = +new Date();
          let context = this;
  
          if (now - previous >= wait) {
              func.apply(context, arguments);
              previous = now; // 执行后更新 previous 值
          }
      }
  }
   

  代码实现防抖

• // 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
  function debounce(fn, delay = 1000) {
  // 实现防抖函数的核心是使用setTimeout
      // time变量用于保存setTimeout返回的Id
      
      let time = null
      
      function _debounce() {
          // 如果time不为0，也就是说有定时器存在，将该定时器清除
          if (time !== null) {
              clearTimeout(time)
          }
          
          time = setTimeout(() => {
              fn()
          }, delay)
      }
      
      // 防抖函数会返回另一个函数，该函数才是真正被调用的函数
      return _debounce
  }
   

  二者应用场景

• 防抖应用场景

• 输入框频繁输入内容，搜索或者提交信息。
• 频繁点击按钮，触发某个事件。
• 监听浏览器滚动事件。
• 监听用户缩放浏览器resize事件。

• 节流引应用场景

• 用户点击提交按钮 一定时间内只能触发一次 例如短信验证码