javascript - 非アクティブなタブの Javascript アニメーションのタイミングをリアルタイム修正で修正

Question

そのため、異なる時間に実行される 2 つのパルス アニメーションをいじっています。

http://jsfiddle.net/JuFxn/16/

パルスのコードはこちらです。フィドルには他にもありますので、チェックしてみてください。

function fadeItIn() {
var child;

child = 4;
setTimeout(fadeIn, 3000);

function fadeIn() {
    $("#child" + child).fadeIn(175);
    --child;
    if (child >= 0) {
        // Continue fading in
        setTimeout(fadeIn, 175);
    } else {
        // Start fading out
        ++child;
        setTimeout(fadeOut, 175);
    }
}

function fadeOut() {
    $("#child" + child).fadeOut(175);
    ++child;
    if (child <= 4) {
        // Continue fading out
        setTimeout(fadeOut, 175);
    } else {
        // Start over again
        setTimeout(fadeIn, 3000 - 1575);
    }
}
}

私が抱えている問題は、タブが非アクティブになると、2 つのパルスのタイミングが非同期になり、互いにかなり離れてしまうことです。私はいくつかの研究を行い、これを見つけました

Chromeでタブが非アクティブなときにsetIntervalも機能させるにはどうすればよいですか?

彼らは、実際のカウンターを実装し、各サイクル中にカウンターの値を追加し、カウンターによって生成された距離に基づいてdivを移動させることで、問題を解決しているようです。そのようなものを実装すると、私が抱えている問題が解決しますか? どうすればそれを使用できますか？問題は、2 番目の関数で setTimeout を使用することから発生していると思います。

setTimeout(fadeItInDoom, 500);

setTimeout を取り出して、2 つのパルスが同時に実行されるようにすると、タイミングがずれることはありません。