当Chrome选项卡未显示时，setInterval'堆栈'

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