Chromeのタブが表示されていない場合、setInterval 'stacks'

Question

ここに他の質問がありますが、タブが非表示のときにsetIntervalが無効になっているか遅くなっていると報告されています。私は別の問題を抱えています。setIntervalへの呼び出しが「スタック」しているように見え、タブが表示されたらすべてが適用されます。

私の場合、数秒ごとにサイトのホームページに画像をアニメーションするスライダがあります。私が1〜2分別のタブに行って帰ってきたら、スライダーが狂ってしまいます...すべてのアニメーションが次々に発射されて捕捉されます。

別のアニメーションがすでに進行中の場合にアニメーションを停止させるコードを追加しようとしましたが、動作しません...タイマーイベントが何らかの方法でキューに入れられてテストが邪魔になるかもしれません。

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関数が返さ無効になります。