本文已参与「新人创作礼」活动，一起开启掘金创作之路。

节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。也可以称为函数节流，目的是减少某些操作的触发速度。

节流的应用场景 :mousemove事件，scroll等事件，鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次事件；懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源。

节流：让操作以指定间隔执行，通过定时器进行设置，在指定的时间间隔内再次触发操作会被忽略，直到本次操作完毕，才允许执行下一次。

<body>
  <img src="./angel.gif" alt="" id="angel" />
  <script>
    // 希望mousemove事件执行间隔变大，至少为100ms，可以使用节流操作
    var flag = true; // 默认为true代表可以执行操作

    // 设置鼠标移动事件
    $(document).on('mousemove', function (e) {
      if (flag !== true) {
        return;
      }
      flag = false; // 设置下次无法触发
      setTimeout(function () {
        // 将鼠标的横纵坐标设置给img的left和top即可
        $('#angel').css({
          left: e.pageX,
          top: e.pageY
        });
        flag = true; // 本次间隔后操作执行后，允许进行下次操作
      }, 100);
    });
  </script>
</body>

节流和防抖的区别

防抖是当指定间隔时间内再次触发，使用新触发的操作再次重新记时。

节流是在指定间隔时间内再次触发，新操作会被忽略。

防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！

节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！

js 节流实现

节流

节流和防抖的区别