节流和防抖

节流

概念：节流是指在一段时间内无论几次触发当前的事件，当前的事件只会等待上次事件处理完毕后才会开始下一次事件处理。简单来说就是：多次触发事件后，事件只会按照一定的时间间隔来处理触发，不会连续多次触发事件，多运用在鼠标触摸事件上。代码实现。

 <body>
    <div class="box"></div>
    <script src="../06-素材/lodash.min.js"></script>
    <script>
      // 性能优化之节流
      let i = 0
      const box = document.querySelector('.box')

      function mouseMove() {
        box.innerHTML = i++
      }

      // 手写节流函数
      // 1.创建一个函数， 首先写一个定时函数
      // 2.定义一个变量，用来存放定时器id 如果id不为空 则关闭定时器
      // 3.如果id为ko 则开启定时器
      // 4.调用函数
      function throttle(fn, t) {
        let timeId = null

        return function () {
          if (!timeId) {
            timeId = setTimeout(function () {
              fn()
              timeId = null
            }, t)
          }
        }
      }
      // 调用函数
      box.addEventListener('mousemove', throttle(mouseMove, 300))
    </script>
  </body>

防抖

概念：防抖是指在一段时间内无论触发多少次事件，都只会执行最后一次事件，前面的事件清除。多运用在多次点击事件上，防止防止高频的事件触发造成不必要的计算消耗

  <body>
    <div class="box"></div>
    <script>
      const box = document.querySelector('.box')

      box.addEventListener('mousemove', deboune(move, 500))
      let i = 1
      function move() {
        box.innerHTML = i++
      }

      //在这里写防抖
      // 防抖：是指在一定的时间里无论触发多少次的函数方法都最终只执行最后一次

      function deboune(fn, t) {
        let timeId
        return function () {
          if (timeId) clearTimeout(timeId)

          timeId = setTimeout(() => {
            fn()
          }, t)
        }
      }
    </script>
  </body>