防抖和节流有什么区别?

一、理解防抖和节流

防抖:在单位时间内频繁触发事件,只有最后一次生效

比如:在游戏回城的时候被打断,再次点回城就会重新计时,最终只有没被打断的最后一次,才能成功回城,就是防抖

节流:在单位时间内频繁触发事件,只生效一次(也就是只有第一次生效)

比如:鼠标点击下一张轮播图,不管单位时间内连续点击了多少次,轮播图都是2秒换下一张,就是节流

防抖和节流都是性能优化的一种手段

二、相同点

1.都可以通过使用 setTimeout 来实现

2.都可以降低回调执行频率,节省计算资源

三、不同点

1.定义不同

函数防抖:一段时间内连续触发事件,只执行最后一次

函数节流:一段事件内只执行一次

2.应用场景不同

防抖:(1)手机号、邮箱地址的校验 (2)当用户input框输入完成后再发请求,如搜索等

节流: 高频事件,如:多少秒之后获取验证码、resize 事件和scroll 事件等

四、代码实现

1.防抖:

<body>

  <input type="text" id="i">

  <script>

    // 1.防抖

    document.querySelector('#i').addEventListener('input', () => {

      debounce()

    })

    let timeId = null

    const debounce = () => {

      clearTimeout(timeId)

      timeId = setTimeout(() => {

        console.log("防抖最后一次输出");

      }, 1000)

    }

  </script>

</body>

 防抖实现效果:

2.节流:

<body>

   <input type="button" id="btn" value="获取验证码">

  <script>

   

// 2.节流

    let flag = true // 设置控制开关

    let timeId = null

    const inp = document.querySelector('#btn')

    inp.addEventListener("click", () => {

      if (!flag) {

        return

      }

      flag = false

      let s = 5

      timeId = setInterval(() => {

        s -= 1

        if (s < 1) {

          inp.value = '获取验证码'

          flag = true

          s = 5

          clearInterval(timeId)

        } else {

          inp.value = s + '秒后再次获取验证码'

        }

      }, 1000)

    })

  </script>

</body>