防抖&节流概念优化对服务器访问的压力，也可优化多次触发的事情防抖（debounce）指的是：频繁触发某个操作时，只执

概念

优化对服务器访问的压力，也可优化多次触发的事情

防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。
节流（throttle）指的是：单位时间内，频繁触发同一个操作，只会触发 1 次。

例子

我们发送请求到接收响应都需要一定的时间，那么我们就用定时器来模拟发送请求。

这里的延时设置为0.3秒

<body>
  <button>发送请求</button>
  <script>
    document.querySelector('button').onclick = function () {
      timer = setTimeout(function () {
        console.log('发送ajax请求...');
      }, 300)
    }
  </script>
</body>

无防抖.gif

在我们每次发送请求，都会收到响应，但是在某些场景我们只需要收到一次响应就够了。那么，这些重复的请求非常浪费资源。于是我们优化一下。

let timer = null
    document.querySelector('button').onclick = function () {
      // 防抖核心代码
      clearTimeout(timer)
      timer = setTimeout(function () {
        console.log('发送ajax请求...');
      }, 300)
    }

看一下优化后的效果

加了防抖之后.gif

OMG家人们，这不是很棒嘛

不愧是我.jpg

再来看看节流

这里方便演示，我把请求延时设为2s

同时这里我用了之前我说过的开关思想

<body>
  <button>发送请求</button>
  <script>
    // 开关思想
    let flag = false
    document.querySelector('button').onclick = function () {
      if (flag) {
        return
      }
      flag = true
      setTimeout(function () {
        console.log('发送ajax请求...')
        flag = false
      }, 2000)
    }
  </script>
</body>

节流之后.gif

当一个暴躁老哥，配上网络不好的时候，这就是一个不错的解决办法。既缓解了服务器压力，又缓解了人类生活压力，还推动了鼠标工厂的销量，非~常好用

总结

节流就像是王者荣耀的平A，并不是你的手点得越快A得越快，而是固定时间内点任意下算A一下。 _我刚刚玩的时候就被别人骗我，说点的越快A得越快_
防抖就是在~~食堂阿姨打饭的时候让他不~~发送请求时，若不停的触发，前面的请求还未发送完毕，那么就不要发送了