防抖和节流的概念及使用方法

目录

防抖（Debounce）

节流（Throttle）

---

防抖和节流是前端开发中常用的两种性能优化技术，用于控制事件触发的频率，提升用户体验。

---

1.防抖（Debounce）：

防抖的原理是在事件触发后等待一段时间，如果在这段时间内再次触发了该事件，则重新计时。只有在该时间段内没有再次触发事件，才会执行相应的操作。防抖常用于处理频繁触发的事件，如窗口大小改变、搜索框输入等。

使用方法：

可以通过使用setTimeout函数来实现防抖效果。每次触发事件时，先清除之前的定时器，然后重新设置一个新的定时器。

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // 定义一个全局变量存储setTimeOut的值
    let timerId = null
    input.addEventListener('input', function () {
      // 每次触发事件都清除掉上一次设置的延时器
      clearTimeout(timerId)
      // 设置延时器，把需要执行的功能代码放在延时器中
      timerId = setTimeout(function () {
        console.log(input.value)
      }, 200)
    })
  </script>

2.节流（Throttle）：

节流的原理是规定一个时间间隔，在该时间间隔内只能触发一次事件。如果在该时间间隔内多次触发事件，只有第一次触发会执行相应的操作，后续的触发会被忽略。节流常用于处理高频率触发的事件，如滚动事件、鼠标移动事件等。

使用方法：

可以通过设置一个标志位来控制事件是否执行。每次触发事件时，先判断标志位是否为true，如果为true则执行相应的操作，并将标志位设置为false。然后通过setTimeout函数在规定的时间间隔后将标志位重新设置为true。

  <style>
    html {
      height: 2000px;
    }
  </style>
  <script>
    let lastTime = 0
    window.addEventListener('scroll', function () {
      // 获取当前时间
      const now = Date.now()
      // 判断当前时间-上一次触发时间
      if (now - lastTime >= 300) {
        console.log(1)
        // 记录上一次触发时间的时间
        lastTime = now
      }
    })
  </script>