当浏览器窗口最小化时，JS会发生什么？
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>
回答 3
Stack Overflow用户
发布于 2018-04-19 17:58:00
是的，看起来几乎在chrome中，使用setInterval的CSS转换是“排队的”，我用d3做的一个时钟有问题，在改变了后台的秒数后，导致浏览器在重新进入页面时出现问题。
Qeued up是指(like you can read here better)这些规则导致使用新转换的整个计时函数，而不是跳到计时函数的中间，这可能会产生不和谐的效果。
实现可以实现的主要优化类别之一是实现在浏览器的合成器线程或进程上运行的某些高值属性(如变换和不透明度)的动画，而不更新主Web内容线程上的样式或布局，除非需要最新的样式数据。这种优化通常需要分配图形内存来显示动画元素的内容。实现应注意确保Web内容不会触发不安全的内存溢出处理，方法是在覆盖较大区域的元素上使用大量动画或动画(其中较大区域可能是根据转换前或转换后的大小定义的)。
我解决了这个问题，检查用户何时更改页面，并检查用户何时重新进入页面，启动和停止计时器。
如果文档不可见，我将停止setTimeout调用；如果文档可见，我将重新启动函数。
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();.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>
Stack Overflow用户
发布于 2018-04-19 18:05:33
一旦窗口获得焦点，setTimeout和setInterval将同时累积并运行。对于排队的动画，它看起来突如其来，有时甚至摇摇晃晃的。我推荐使用能够识别当前窗口焦点的window.requestAnimationFrame。因此，您提供的动画或函数将不会执行。
Stack Overflow用户
发布于 2018-04-19 18:31:06
这里的问题与setTimeout等无关，它们在你请求的时间运行得很好，即使最小化了，这里也没有排队。
但是不会继续运行的是动画(因为这只是一种浪费)，而且您很可能知道CSS动画会在应用动画类时触发。所以在最小化的时候，你的.flipper类仍然在改变，但是因为动画已经暂停了，它们不会被触发，直到动画在离开最小化状态时被恢复。
说到这里，按照Mr.Bruno的建议暂停计时器似乎是一个好主意，为什么还要费心在看不见的时候翻转类呢？
https://stackoverflow.com/questions/49917847
复制相似问题
腾讯云开发者
