I'm trying to make a loop in Javascript/jQuery. This block of code works fine on one run through (if I remove the 'for' loop), but if I put it in a loop it doesn't appear to work once and instead seems to hang.

var z=0;

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

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

}

Not the clearest explanation, I know, but any help (including advice with javascript loops) would be much appreciated.

I'm trying to make a loop in Javascript/jQuery. This block of code works fine on one run through (if I remove the 'for' loop), but if I put it in a loop it doesn't appear to work once and instead seems to hang.

var z=0;

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

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

}

Not the clearest explanation, I know, but any help (including advice with javascript loops) would be much appreciated.

• javascript
• jquery
• loops
• for-loop

• what does this block of code do? And once you put it in a for loops should the 'z' in the for loop play a role in the body of code? – Glenn Ferrie Commented Jul 12, 2011 at 18:12
• @John i am not totally sure what you think you are doing here... – Naftali Commented Jul 12, 2011 at 18:13
• 2 What are you trying to do? There must be an easier way than the nested nightmare you have here. – FishBasketGordo Commented Jul 12, 2011 at 18:13
• 3 Reselecting #wele 11,000 times via jQuery and you wonder why it hangs.... – Thomas Shields Commented Jul 12, 2011 at 18:19
• 4 nooooooooooooooo. – Radu Commented Jul 12, 2011 at 18:24

4 Answers 4

FYI, you can chain jQuery functions:

$('#wele').fadeTo(100, .1).fadeTo(100, 1)...fadeTo(1, 0, function(){
    $('#wele_distort').fadeTo(1, 1)...fadeTo(1, 0, function(){
        $('#wele').fade...

The reason it doesn't work in a loop is because you're trying to do 1,000 animations at exactly the same time, thus -killing- the browser. Wrap this in a function and re-call it when done:

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

Have you seen the easing plugin? I can only assume you are attempting to do some sort of custom animation with this craziness.

Otherwise, I would create an array of all the variables you need to fade to. And cache the $("#wele") call, and possibly use deferreds.

It's because the loop will iterate instantly and not wait for your callbacks.

Try this:

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
    */
}

Also, try this instead of the monstrosity you have =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() { $("#wele").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();            
}