持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

节流

概念：节流（throttle）指的是：单位时间内，频繁触发同一个操作，只会触发 1次。作用：减少逻辑执行的次数。场景：页面新闻刷新，浏览器大小改变页面适配。好处：这样可以有效减少请求的次数，节省网络资源。

还是不懂什么是防抖?或者记不住?举个栗子

截图.png

moba游戏应该都玩过,比如王者荣耀!

节流如同技能CD:指定的时间间隔内,只执行一次

下面用代码演示下:

节流.png

<!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>
  <button id="btn">释放技能</button>
  <script>
    //节流:指定的时间间隔内,只执行一次  如同技能CD
    flag = false //开关控制器  开闭原则
    document.querySelector('#btn').onclick = function () {
      //节流核心:不能频繁触发定时器
      if (flag) {
        return
      }
      //经过if判断,如果flag的值是fakse,就改为true
      flag = true
      //多次触发以第一次为主
      setTimeout(function () {
        console.log('技能已释放,3秒冷却')
        //执行完毕之后,再把flag改为false
        flag = false
      }, 3000)
    }

  </script>
</body>

</html>

王者荣耀告诉你什么是节流

节流