jquery - ブラウザで別のウィンドウに移動すると、Jquery 関数のタイミングが変わる

Question

このフィドルには、特定のタイミングを念頭に置いて脈動する一連の関数があります

http://jsfiddle.net/upBdw/8/

実行すると、上から中、下に移動することがわかります。別のウィンドウを開き、フィドルが別のウィンドウで開いている間に、別の Web ページを数秒間サーフィンしてみます。フィドルに戻ると、タイミングが変更されていることがわかります。これは何が原因ですか？私は一生、何が起こっているのか理解できません。

パルスのコードはここにあります

function fadeItIn() {

  window.setInterval(function(){

    // Fade Ins
    $('#child4,#child4C').fadeIn(175);
    setTimeout(function () {
        $('#child3,#child3C').fadeIn(175);
    }, 175);
    setTimeout(function () {
        $('#child2,#child2C').fadeIn(175);
    }, 350);
    setTimeout(function () {
        $('#child1,#child1C').fadeIn(175);
    }, 525);
    setTimeout(function () {
        $('#child,#childC').fadeIn(175);
    }, 700);

    // Fade Outs
    setTimeout(function () {
        $('#child,#childC').fadeOut(175);
    }, 875);
    setTimeout(function () {
        $('#child1,#child1C').fadeOut(175);
    }, 1050);
    setTimeout(function () {
        $('#child2,#child2C').fadeOut(175);
    }, 1225);
    setTimeout(function () {
        $('#child3,#child3C').fadeOut(175);
    }, 1400);
    setTimeout(function () {
        $('#child4,#child4C').fadeOut(175);
    }, 1575);  

  }, 3000);    


};

Answer 1

この問題は、タブがアクティブでないときに setTimeOut 関数が機能しないために発生します。最後のアニメーションからのコールバックを使用して、別のアニメーションをトリガーしてみてください。