节流和防抖

节流

是在触发一个事件后，等待规定的时间才会执行。在等待的期间，如果再次触发，是无效的。只有本次的执行完毕，才可以再次触发。

<button class="btn">按钮</button>
  <script>
    function throttle(fn, delay) {
      let timer
      return (...args) => {
        if (timer) {
          console.log(timer);
          return
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null  //这个不能少，要不然下一次触发timer还是上一次的定时器
        }, delay)
      }
    }

    let btn = document.querySelector(".btn")记录一下自己复习的内容
    btn.addEventListener('click', throttle(function () {
      alert("123")
    }, 2000))
  </script>

防抖

是在触发一个事件后，等待规定的时间才会执行。在等待的期间，如果再次触发，那么就清除本次的定时器，重新定义一个新的定时器，又重新等待时间执行。

<button class="btn">按钮</button>
  <script>
    function debounce(fn, delay) {
      let timer
      return (...args) => {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, delay)
      }
    }
    let btn = document.querySelector(".btn")
    btn.addEventListener('click', debounce(function () {
      alert("123")
    }, 2000))
  </script>