防抖和节流是干嘛的?

防抖和节流都是用来防止高频率的js代码的执行

防抖(debounce)

      所谓防抖,就是指事件触发之后再N秒内只能执行一次,如果再N秒内被重新出发了事件,则会重新计算函数执行时间

举个例子

北京买房政策：需要连续5年的社保，如果中间有一年断了社保，
则需要从新开始计算比如，我 2020年开始计算，连续交5年，也就是到2024年可以买房了，
包含2020年但是我 2024年断社保了，整年没交，
则需要从2025年开始算第一年往后推5年… 也就是 2029年才能买房…

开发使用场景- 搜索框防抖

  假设输入就可以发送请求，
  但是不能每次输入都去发送请求，
  输入比较快发送请求会比较多我们设定一个时间，
  假如300ms， 
  当输入第一个字符时候，
  300ms后发送请求
  ，但是在200ms的时候又输入了一个字符，
  则需要再等300ms 后发送请求

防抖代码示例:

  <script>
      const box = document.querySelector('.box')
      let i = 1  // 让这个变量++
      // 鼠标移动函数
      function mouseMove() {
        box.innerHTML = ++i
        // 如果里面存在大量操作 dom 的情况，可能会卡顿
      }
      // 防抖函数
      function debounce(fn, t) {
        let timeId
        return function () {
          // 如果有定时器就清除
          if (timeId) clearTimeout(timeId)
          // 开启定时器 200
          timeId = setTimeout(function () {
            fn()
          }, t)
        }
      }
      // box.addEventListener('mousemove', mouseMove)
      box.addEventListener('mousemove', debounce(mouseMove, 200))
  
    </script>

节流(throttle)

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

开发使用场景 – 小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动就可以加节流
假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换
加上节流效果，不管快速点击多少次， 300ms时间内，只能切换一张图片

   <script>
      const box = document.querySelector('.box')
      let i = 1  // 让这个变量++
      // 鼠标移动函数
      function mouseMove() {
        box.innerHTML = ++i
        // 如果里面存在大量操作 dom 的情况，可能会卡顿
      }
      // console.log(mouseMove)
      // 节流函数 throttle 
      function throttle(fn, t) {
        // 起始时间
        let startTime = 0
        return function () {
          // 得到当前的时间
          let now = Date.now()
          // 判断如果大于等于 500 采取调用函数
          if (now - startTime >= t) {
            // 调用函数
            fn()
            // 起始的时间 = 现在的时间   写在调用函数的下面 
            startTime = now
          }
        }
      }
      box.addEventListener('mousemove', throttle(mouseMove, 500))
      </script>