什么是防抖节流以及使用

最新推荐文章于 2022-05-29 16:24:12 发布

weixin_46192081

最新推荐文章于 2022-05-29 16:24:12 发布

阅读量159

点赞数

分类专栏：介绍使用

本文链接：https://blog.csdn.net/weixin_46192081/article/details/117854668

版权

介绍同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

使用

5 篇文章 0 订阅

订阅专栏

高频触发代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    1
  </p>
  <p>
    2
  </p>
  <p>
    3
  </p>
  <p>
    4
  </p>
  <input id="input" />
  <script>
    function doSomething(){
      console.log((new Date()).toLocaleTimeString(), (new Date()).getMilliseconds(),'发ajax', input.value)
    }
    
    document.getElementById('input').addEventListener('input', () => {
      console.log('文本框内容变化')
      doSomething()
    }) 
    
    window.addEventListener('scroll',() => {
      console.log('滚动条')
      doSomething()
    })
    window.addEventListener('resize',() => {
      console.log('窗口缩放')
      doSomething()
    })
    document.addEventListener('mousemove',() => {
      console.log('鼠标移动')
      doSomething()
    })
  </script>
</body>
</html>

会出现短时间内多次触发事件，如果发送请求高频请求很有可能产出无用功，并且对服务器造成压力

那么如何解决呢？

可以通过防抖和节流两种方法来解决

防抖原理：

在‘t’这段时间内连续触发，只执行最后一次触发（第n次调用那么事件间隔为n+t）

就像乘电梯一样，电梯开门后等待（假如5秒钟）那么在这段时间内如果乘电梯的人又来了一个那么距离电梯关门就又多加5秒钟，以此类推

防抖
    hInput () {
      clearTimeout(this.timer)
      console.log(this.keyword)
      this.timer = setTimeout(() => {
        this.doAjax()
      }, 200)
    },

节流原理：

在‘t’这段时间内不能在执行，只有过了t这段时间才肯以就执行（第n+1调用必须要与第n次调用之间的时间间隔 >=t）

就像水龙头一样（把水龙头关小一滴一滴的自然掉落）第一滴和第二滴在t这段时间内不继续流水

Input () {
      const dt = Date.now() // 获取当前时间戳 ms为单位
      if (dt - this.startTime > 500) {
        this.doAjax()
        this.startTime = dt
      } else {
        console.log('当前的时间戳是', dt, '距离上一次执行不够500ms,所以不执行')
      }
    },