[js]防抖与节流

[zhuanghaixin]

• 当持续触发事件时，不执行逻辑代码
• 当触发停止时，过一段时间再执行逻辑代码

  var timer = null
  window.onscroll = function () { // 12 次连接执行
      // 每次进来之前，将之前的定时器清除掉
      clearTimeout(timer)
      timer = setTimeout(() => {
          console.log('onscroll')
      }, 1000);
  }

• 当持续触发事件时，每隔固定时间也会执行一次逻辑代码
• 当触发停止时，过一段时间再执行逻辑代码

  
  // 创建一个开始时间
  var beginTime = Date.now()
  // 定义一个定时器
  var timer = null
  // 给窗口添加滚动事件
  window.onscroll = function () { // 1000 次（连续执行的）
      // 清除定时器
      clearTimeout(timer)
      // 得到当前时间
      var currentTime = Date.now()
      // 得到一个时间间隔
      var space = currentTime - beginTime
      // 如果时间间隔大于 1000 ,就执行逻辑
      if (space > 1000) {
          console.log('onscroll')
          // 由于上一次已经执行完成，开始时间应该变为现在的时间
          beginTime = Date.now()
      } else {
          timer = setTimeout(() => {
              console.log('onscroll')
          }, 1000);
      }
  }