Javascript для цикла

Question

Я пытаюсь сделать цикл в Javascript / jQuery.Этот блок кода отлично работает при одном проходе (если я удаляю цикл for), но если я помещаю его в цикл, он, кажется, не работает один раз и вместо этого кажется зависшим.

var z=0;

for(z=0;z<=1000;z++){

$("#welcome").fadeTo(100,0.1,
    function(){$("#welcome").fadeTo(100,1.0,
        function(){$("#welcome").fadeTo(50,0.1,
            function(){$("#welcome").fadeTo(10,1.0,
                function(){$("#welcome").fadeTo(10,0.1,
                    function(){$("#welcome").fadeTo(10,1.0,
                        function(){$("#welcome").fadeTo(1,0.0,
                            function(){$("#welcome_distort").fadeTo(1,1.0,
                                function(){$("#welcome_distort").fadeTo(500,1.0,
                                    function(){$("#welcome_distort").fadeTo(1,0.0,
                                        function(){$("#welcome").fadeTo(1,1.0,
                                            function(){$("#welcome").fadeTo(50,0.1,
                                                function(){$("#welcome").fadeTo(50,1.0,
                                                    function(){$("#welcome").fadeTo(500,1.0
                                                    );}
                                                );}
                                            );}
                                        );}
                                    );}
                                );}
                            );}
                        );}
                    );}
                );}
            );}
        );}
    );}
);

}

Не самое ясное объяснение, я знаю, но любая помощь (включая советы с циклами javascript) была бы очень признательна.

Answer 1

К вашему сведению, вы можете связать функции jQuery:

$('#welcome').fadeTo(100, .1).fadeTo(100, 1)...fadeTo(1, 0, function(){
    $('#welcome_distort').fadeTo(1, 1)...fadeTo(1, 0, function(){
        $('#welcome').fade...

Причина, по которой он не работает в цикле, заключается в том, что вы пытаетесь сделать 1000 анимаций одновременно, убивая браузер. Оберните это в функцию и перезвоните, когда закончите:

function runAnimation(){
    $('#welcome')....function(){
        function(){
            function(){
               runAnimation();
            }
        }
    }
}
runAnimation();

Answer 2

Вы видели плагин easing ?Я могу только предположить, что вы пытаетесь сделать какую-то пользовательскую анимацию с этим сумасшествием.

В противном случае, я бы создал массив всех переменных, к которым вам нужно переходить.Кэшируйте вызов $("#welcome") и, возможно, используйте deferreds .

Answer 3

Это потому, что цикл будет повторяться мгновенно и не будет ждать ваших обратных вызовов.

Попробуйте это:

var counter = 0;

function do_huge_nested_craziness(){
    if(counter > 100)
    {
        return false;
    }
    /// do huge nested craziness..

    /* in the last callback add this:
    counter++;
    do_huge_nested_craziness(); //recursion
    */
}

Answer 4

Кроме того, попробуйте это вместо того чудовища, которое у вас есть = P.

function make_fader(vals) {
    var next_func = animate_me;
    if (vals.length > 1) {
        var next_vals = [];
        for (var i=1; i<vals.length; i++) next_vals[i-1] = vals[i];
        var next_func = make_fader(next_vals);
    }

    return function() { $("#welcome").fadeTo(vals[0][0], vals[0][1], next_func); };
}
var fader_func = make_fader([[100, 0.1], [100,1.0],[50,0.1],[10,1.0]...]);

var g_count = 0;
function animate_me() {
    g_count += 1;
    if (g_count < 1000) 
        fader_func();            
}