javascript - Javascript setTimeout 関数の問題またはコールバックの問題

Question

http://www.emoceanstudios.com.au/test.phpとhttp://www.emoceanstudios.com.au/test2.phpの2 つのテスト ページがあります。最初のページに関連するスクリプトは次のとおりです。

<script type="text/javascript">
function slide_out(){
    $('#red-block').animate({
        marginLeft: -278
    }, 500);
    $('#yellow-block').animate({
        marginTop: -316
    }, 500);    
    $('#gray-block').animate({
        marginLeft: 278
    }, 500, function(){
        $('#three-color-container').fadeOut(500, function() {
            $('#three-color-container-new').fadeIn(500, function() {
                window.setTimeout(function(){slide_in()}, 4000);
            });
        }); 
    }); 
}
function slide_in(){
    $('#three-color-container-new').fadeOut(500, function() {
        $('#three-color-container').fadeIn(500, function(){
            $('#red-block, #yellow-block, #gray-block').animate({
                marginLeft: 0,
                marginTop: 0
            }, 500, function() {
                window.setTimeout(function(){slide_out()}, 4000);
            });
        });
    });
}

window.setTimeout(function(){slide_out()}, 4000);
</script>

赤、黄、灰色のブロックは次のようにスライドします: アウト、イン、アウト、イン、アウト、そしてフラッシュ (これは私が望むものではありません) で、2 回半のループでのみ機能します。タイマーを 4000 から 6000 に設定すると、最大 3 回のループで動作し、その後も中断します。

私はそれがアウト、イン、アウト、イン、アウト、イン、アウト、イン、アウト、イン、アウト、イン、アウト、イン、アウト、インであることを望んでいます. setTimeout 関数。しかし、これは 3 つのアニメーションが次の関数を 3 回呼び出すためだと思われるので、2 ページ目を変更して作成し、3 つのアニメーションを関数に入れ、次の関数をコールバックします。コードは次のとおりです。

<script type="text/javascript">
function slide_out(){
    block_out(callback);
}
function slide_in(){
    $('#three-color-container-new').fadeOut(500, function() {
        $('#three-color-container').fadeIn(500, function(){
            $('#red-block, #yellow-block, #gray-block').animate({
                marginLeft: 0,
                marginTop: 0
            }, 500, function() {
                window.setTimeout(function(){slide_out()}, 4000);
            });
        });
    });
}
function block_out(callback){
    $('#red-block').animate({
        marginLeft: -278
    }, 500);
    $('#yellow-block').animate({
        marginTop: -316
    }, 500);    
    $('#gray-block').animate({
        marginLeft: 278
    }, 500);    
    callback();
}
function callback(){
    $('#three-color-container').fadeOut(500, function() {
        $('#three-color-container-new').fadeIn(500, function() {
            window.setTimeout(function(){slide_in()}, 4000);
        });
    }); 
}
window.setTimeout(function(){slide_out()}, 4000);
</script>   

これで 4 ～ 5 ループの作業になり、その後再び壊れます。