jQuery and setTimeout inside For loop [duplicate]

Question

I just encountered a very weird issue (I fixed it though) but I wanted to know why did it happen in the first place:

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(speech[i]).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
    console.log(speech[i]);
}

The console log shows "#yo0" then "#ma0b" (which is the required) but at the same time, they never faded in

I played around with the code until I reached this:

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(x).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
}

And that did the trick, but I don't know why the first code didn't work. Can someone explain that to me, please? And thank you!

I actually checked it out. And changed my code according to it (my code originally was a setTimeout inside the For Loop that calls the function instead of a For Loop that calls a function which inside it is a setTimeout — Mathspy
– Mathspy, Commented Apr 6, 2014 at 8:37
Fascinating. It looks like it should have worked as you did pass i originally. Can you setup a JSFiddle with your HTML? @undefined: it is not the same as that other question, as he was passing the index as a local var. — iCollect.it Ltd
– iCollect.it Ltd, Commented Apr 6, 2014 at 8:41
jsfiddle.net/2XhqH speech is defined as a global array and strings are being pushed to it — Mathspy
– Mathspy, Commented Apr 6, 2014 at 8:53
jsfiddle.net/2XhqH/1 my apologises I used the HTML only because TrueBlueAussie said that he wanted to see the HTML (also the code is big and divided between lots of files because I am working on creating a simple game engine) (P.S: This code is used only for demonstrating, it doesn't do it this way in the real code) — Mathspy
– Mathspy, Commented Apr 6, 2014 at 9:01
BTW: Please correct appearance too - spelling is important in code too (especially if you are going to publish it on SO) :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Apr 6, 2014 at 9:17

iCollect.it Ltd · Accepted Answer · 2014-04-06 10:21:15Z

In a JSFiddle both versions work fine (and the same):

First: http://jsfiddle.net/TrueBlueAussie/Bkz55/3/

var speech = ["#yo0", "#ma0b", "#blah"];

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(speech[i]).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
    console.log(speech[i]);  // <<< THIS WOULD OCCUR IMMEDIATELY
}

Second: http://jsfiddle.net/TrueBlueAussie/Bkz55/4/

var speech = ["#yo0", "#ma0b", "#blah"];

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(x).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
}

So I suspect what you are seeing is a side effect of your other code (not shown).

The only odd thing is you were logging in the first version twice (once outside the setTimeout which would display at the start - as you mentioned)

Follow up:

Having now seen the real code, the cause was changing of the speech array during the timeouts. When the timeout function was finally hit the speech array was empty!

Thank you very much! I would like to show you the full code so that you can enlighten me why it's not working, I am going to use the contact us section over your website if that's okay with you.

Collectives™ on Stack Overflow

jQuery and setTimeout inside For loop [duplicate]

1 Answer 1

First: http://jsfiddle.net/TrueBlueAussie/Bkz55/3/

Second: http://jsfiddle.net/TrueBlueAussie/Bkz55/4/

Follow up:

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

First: http://jsfiddle.net/TrueBlueAussie/Bkz55/3/

Second: http://jsfiddle.net/TrueBlueAussie/Bkz55/4/

Follow up:

3 Comments

Linked

Related