Question

在此处查看其他问题时，他们似乎会在隐藏选项卡时禁用或减慢报告setInterval。我看到了一个不同的问题 - 对setInterval的调用似乎是“堆叠”，然后在显示标签时都会应用。

在我的情况下，我有一个滑块，可以每隔几秒在网站主页上激活一个图像。如果我转到另一个标签一两分钟然后返回，滑块会变得疯狂......所有的动画都会一个接一个地触发，直到它被赶上来。

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

   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函数。

未显示Chrome标签时，setInterval'stacks'

1 个答案: