javascript - 未显示 Chrome 选项卡时设置间隔 'stacks'

Question

在这里查看其他问题时，他们似乎报告 setInterval 在隐藏选项卡时被禁用或减慢。我看到了一个不同的问题 - 对 setInterval 的调用似乎“堆叠”，然后在显示选项卡时全部应用。

在我的例子中，我有一个 slider ，它每隔几秒就会在网站主页上显示一个图像。如果我转到另一个选项卡一两分钟然后返回， slider 会变得疯狂......所有动画都会一个接一个地触发，直到它被追上。

如果另一个动画已经在进行中，我尝试添加代码来停止动画的发生，但它不起作用......也许计时器事件以某种方式排队，从而绕过了我的测试。

   setInterval(function(){
                    if (!rotationQueued) {
                                        rotationQueued = true;
                                        rotate_slide('next');
                                    }
                         }

所以，我希望 JS 在选项卡隐藏时暂停 - 或者正常运行 - 除了这个!

Answer 1

你可以尝试这样的事情:

function runRotate() {
    return window.setInterval(function(){
        if (!rotationQueued) {
            rotationQueued = true;
            rotate_slide('next');
        }
    });
}

var run = runRotate();

window.addEventListener('focus', function() {
    run = runRotate();
},false);

window.addEventListener('blur', function() {
    window.clearInterval(run);
},false);

您基本上会查看浏览器窗口是否聚焦，然后根据返回的事件运行或禁用 setInterval 函数。