javascript - 当浏览器窗口最小化时，JS 会发生什么？

Question

是否 JS 继续执行，但在用户再次查看该浏览器窗口/选项卡之前不会呈现 HTML？

运行下面的例子，离开浏览器窗口一段时间再回来，看起来好像有什么东西被排队了？它是什么？为什么？我可以阻止它吗？

setInterval(updateTiles, 4000);

function updateTiles() {

  var boxes, randomIndex, randomBox;

  boxes = $(".box");

  randomIndex = Math.floor(getRandomArbitrary(0, boxes.length));
  randomBox = $(boxes[randomIndex]);

  $(randomBox).toggleClass("flipper");
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
  margin:10px;
}

.flipper {
  transition: 1.5s;
  transform-style: preserve-3d;
  transform: rotateX(360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 1

一旦窗口获得焦点，setTimeout 和 setInterval 将累积并立即运行。对于排队的动画，它看起来很突然，有时甚至是卡顿。我建议使用了解当前窗口焦点的 window.requestAnimationFrame。因此您提供的动画或功能将不会执行。