js 防抖和节流

防抖和节流是前端开发中比较常见的性能优化手段，先看一下 各自的概念

• 防抖 防止抖动，避免事件的重复触发
• 节流 减少流量，将频繁触发的事件减少，并每隔一段时间执行

概念就是字面意思，下面看看具体的代码

// 防抖
// 一段时间之后执行，期间激活重新计时
  function a() {
    console.log('我执行了')
  }
  function fangdou(fn, time) {
    var timer = null
    console.log(timer)
    return function () {
      if (timer !== null) {
        clearTimeout(timer)
      }
      timer = setTimeout(fn, time);
    }
  }
  window.addEventListener('resize', fangdou(a, 1000))
// 可以看出，再设定的时间内重复触发函数，会取消定时器并重新设定，在设定的时间内没有触发，才会执行定时器内响应的回调

// 节流 
// 一段时间内只执行一次事件，在执行完事件后 在去执行下一次事件
  function jieliu(fn, time) {
    var timer = null
    return function () {
      if (timer) {
        return false
      }
      timer = setTimeout(() => {
        fn()
        timer = null
      }, time);
    }
  }
  function zhixing() {
    console.log('执行了')
  }
  window.addEventListener('resize', jieliu(zhixing, 1000))