Question

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

运行下面的示例，离开浏览器窗口几个间隔然后回来，看起来好像有什么东西要么？它是什么？为什么？我能阻止它吗？

＆＃13;

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;
}

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
  margin:10px;
}

.flipper {
  transition: 1.5s;
  transform-style: preserve-3d;
  transform: rotateX(360deg);
}

＆＃13;

<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>

＆＃13;

Answer 1

是的，看起来，几乎在chrome中，使用setInterval的CSS Transitions是＆＃34; qeued up＆＃34;，我在d3中制作时钟时出现问题，在更改背景中的秒数后，在重新进入页面时导致浏览器出现问题。

Qeued up表示这些规则导致（like you can read here better）   相反，使用新转换的整个计时功能   跳到计时功能的中间，这可以创建一个   刺耳的效果。

实现可以实现的主要优化类别之一   make正在实现某些高价值属性的动画（例如   作为转换和不透明度）在浏览器的合成器线程上运行   进程而不更新主Web内容上的样式或布局   线程除非需要最新的样式数据。这种优化   通常需要分配图形内存来显示内容   被动画的元素。实施应该注意   确保Web内容不会触发不安全的内存不足处理   通过在元素上使用大量动画或动画   覆盖大面积（大面积可以定义   预变换或后变换大小。）

我解决了，检查用户何时更改页面，以及检查用户何时重新进入页面，启动和停止计时器。

如何查看，如果我的文档不可见，我会停止setTimeout调用，如果文档可见，我会重新启动函数。

＆＃13;

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

function updateTiles() {
  if(!document.hidden){
    console.log('the function is running');
    var boxes, randomIndex, randomBox;

    boxes = $(".box");

    randomIndex = Math.floor(getRandomArbitrary(0, boxes.length));
    randomBox = $(boxes[randomIndex]);

    $(randomBox).toggleClass("flipper");
    setTimeout(updateTiles, 4000);
  }else{
    console.log('stop the function');
  }
}

var restartTimer=function ()  {
        if (!document.hidden) {
            console.log('restart the function');
            updateTiles();
        }
    };

document.removeEventListener('visibilitychange',restartTimer);
document.addEventListener('visibilitychange',restartTimer);

updateTiles();

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
  margin:10px;
}

.flipper {
  transition: 1.5s;
  transform-style: preserve-3d;
  transform: rotateX(360deg);
}

＆＃13;

<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>

＆＃13;

Answer 2

一旦窗口获得焦点，

setTimeout和setInterval将立即累积并运行。对于排队的动画，它看起来很突然，有时很笨拙。我建议使用知道当前窗口焦点的 window.requestAnimationFrame 。因此，您提供的动画或功能将无法执行。

Answer 3

此处的问题与setTimeout等无关，即使在最小化时，它们也会在您请求的时候正常运行，没有任何内容排在这里。

但是没有继续运行的是动画（因为这只是浪费），并且你很可能知道在动画类应用时会触发CSS动画。因此，尽管最小化，你的.flipper类仍然会发生变化，但由于动画已经暂停，因此在最小化状态退出动画之前它们不会触发。

说到这一切，做布鲁诺先生建议暂停计时器似乎是一个好主意，为什么甚至在不可见时打扰翻转课程。

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

3 个答案: