事件节流

事件节流用于控制事件触发的最小间隔。

如一个事件 100 毫秒内只能触发一次。

如窗口缩放过程中对页面的元素大小重新调整，因为 resize 事件的触发是非常快的，用户虽然在频繁的变更窗口尺寸，但用户单位时间内能感知到的事情是有限的，也许一秒内执行100次尺寸计算和一秒钟内执行10次尺寸计算，感知上是没有太大区别的，而且事件内有太多的操作，又在频繁触发事件，这样很容易造成浏览器的卡顿。

<style>
  .outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:rgb(0, 0, 0); }
  .outer .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 100px; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; }
</style>

<div class="outer">
  <div class="text">100x200</div>
</div>

<script>
  var text = document.querySelector('.text');

  var resize = function() {
    var height = window.innerHeight;
    var width = window.innerWidth;

    text.innerText = width + 'x' + height;
  };

  window.addEventListener('resize', resize);

  resize();
</script>

可以看到，resize 事件的响应是非常快的，与之类似的还有 scroll 事件，即滚动条滚动时触发的事件。

这种情况下就可以使用节流的方式来优化事件。

<style>
  .outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background:rgb(0, 0, 0); }
  .outer .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 100px; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; }
</style>

<div class="outer">
  <div class="text"></div>
</div>

<script>
  var text = document.querySelector('.text');
  var timer = false;

  var resize = function() {
    if (timer) return; // 判断是不是上一次事件执行完300毫秒内

    var height = window.innerHeight;
    var width = window.innerWidth;

    text.innerText = width + 'x' + height;

    timer = setTimeout(function () {
      timer = null;
    }, 300);
  };

  window.addEventListener('resize', resize);

  resize();
</script>

对例子做了一个简单的修改，增加了 timer 变量，用于存放定时器的标志值(定时器的返回值)，每当事件触发时，给 timer 赋值，这个时候事件就会处于一个锁住的状态，直到 300 毫秒后，timer 再次被设置为 null，表示可以触发事件。

根据需求，业务逻辑执行的时机是在定时器内还是定时器外可以自由调配。