Javascript 'for' loop

Question

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++){

$("#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
                                                    );}
                                                );}
                                            );}
                                        );}
                                    );}
                                );}
                            );}
                        );}
                    );}
                );}
            );}
        );}
    );}
);

}

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

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
– Glenn Ferrie, Commented Jul 12, 2011 at 18:12
@John i am not totally sure what you think you are doing here... — Naftali
– Naftali, Commented Jul 12, 2011 at 18:13
What are you trying to do? There must be an easier way than the nested nightmare you have here. — FishBasketGordo
– FishBasketGordo, Commented Jul 12, 2011 at 18:13
Reselecting #welcome 11,000 times via jQuery and you wonder why it hangs.... — Thomas Shields
– Thomas Shields, Commented Jul 12, 2011 at 18:19

score 11 · Accepted Answer · 2011-07-12 18:21:38Z

11

FYI, you can chain jQuery functions:

$('#welcome').fadeTo(100, .1).fadeTo(100, 1)...fadeTo(1, 0, function(){
    $('#welcome_distort').fadeTo(1, 1)...fadeTo(1, 0, function(){
        $('#welcome').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(){
    $('#welcome')....function(){
        function(){
            function(){
               runAnimation();
            }
        }
    }
}
runAnimation();

edited Jul 12, 2011 at 18:21

answered Jul 12, 2011 at 18:12

user578895

Sign up to request clarification or add additional context in comments.

2 Comments

zzzzBov Over a year ago

i would upvote this if only it was a comment. There's no reason to post this as an answer when it doesn't answer the question.

Paul Lammertsma Over a year ago

In my opinion, there isn't any real question other than "why does my browser hang", for which this is a very clear explanation.

Josiah Ruddell · Accepted Answer · 2011-07-12 18:20:02Z

2

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 $("#welcome") call, and possibly use deferreds.

answered Jul 12, 2011 at 18:20

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

Radu Over a year ago

Agreed, in all seriousness tell us more about what you can accomplish and we can suggested better alternatives like easing.

SeanCannon · Accepted Answer · 2011-07-12 18:14:25Z

1

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

answered Jul 12, 2011 at 18:14

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

2 Comments

user578895 Over a year ago

I'm pretty sure the 1000 is intended to be "run forever" (considering it'll be about 90 minutes of animation), thus no need for the counter.

SeanCannon Over a year ago

I'm sure you're right - just keeping it as close to the OP's request as possible :)

Claudiu · Accepted Answer · 2011-07-12 18:22:59Z

0

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() { $("#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();            
}

answered Jul 12, 2011 at 18:22

Claudiu

231k174 gold badges507 silver badges701 bronze badges

Collectives™ on Stack Overflow

Javascript 'for' loop

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related