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