setTimeout() - in for loop with random delay

Question

Possible Duplicate:
Javascript closure inside loops - simple practical example

Seen many posts talking about setTimeout and closures but I'm still not able to pass in a simple for loop counter.

for (i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, Math.floor(Math.random() * 1000));
}

Gives

5
5
5
5
5

Would like to have

0
1
2
3
4

What's wrong ?
Please don't flame, I thought I have understood the setTimeout() tale but apparently not.

The exactly same thing was asked yesterday. Please, check [How to pass a variable into a setTimeout function?](http://stackoverflow.com/questions/10217536/how-to-pass-a-variable-into-a-settimeout-function) — ZER0, Apr 20 '12 at 08:03
I didn't see this one, but there is still no random in the `setTimeout` delay (that I was thinking to be the difference) — Pierre de LESPINAY, Apr 20 '12 at 08:05
No, the problem is that you are creating a function inside a loop. Whether `setTimeout` is involved or not, with a random timeout or not, is irrelevant. — Felix Kling, Apr 20 '12 at 08:10
The question was also based on the order of display which is obviously caused by the `random`, that was my mistake actually. — Pierre de LESPINAY, Apr 20 '12 at 08:12

James Allardice · Accepted Answer · 2012-04-20T07:57:43.543

18

You can use a closure to keep a reference to the current value of i within the loop:

for (i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function () {
            console.log(i);
        }, Math.floor(Math.random() * 1000));
    })(i); //Pass current value into self-executing anonymous function
}

However, this is unlikely to print the numbers in order since you use a random timeout (you could use i * 1000 instead to make the numbers print in ascending order, one second apart).

Here's a working example.

edited Apr 20 '12 at 07:57

answered Apr 20 '12 at 07:52

James Allardice

164,175
21
332
312

Is there a reason to re-use the name 'i' for the function parameter? I noticed that @JamieDixon does the same thing. To me that obscures the fact that they are completely separate variables and makes it more complicated to understand. Forked your jsfiddle as an example: http://jsfiddle.net/RnN6r/ – Jeremy Wiebe Jun 19 '12 at 12:35
@JeremyWiebe - No, there's no reason, you can use any identifier you like. I tend to use the same name because I find it clearer, but each to their own. – James Allardice Jun 19 '12 at 12:38

Jamie Dixon · Answer 2 · 2012-04-20T07:57:27.400

You need to pass i to the function being used in the setTimeout. By the time your first method is executed, i is already set to 5.

Since your timeout is variable due to the call to Math.Random(), the timeouts will be different and you won't get them in the sequence you're expecting.

Here's a working example

for (i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function () {
            console.log(i);
        }, 1000);
    })(i);
}

Changing Math.floor(Math.random() * 1000) to simply 1000 ensures that the functions execute in the order you're expecting.

score 3 · Answer 3 · answered Apr 20 '12 at 07:52

You need to wrap the "interesting" code in a function that closes over i and copies it in a local variable:

for (i = 0; i < 5; i++) {
  (function() {
    var j = i;
    setTimeout(function () {
      console.log(j);
    }, Math.floor(Math.random() * 1000));
  })();
}

The "intermediate" function call forces the value of j to be fixed at the point that function is called, so within each setTimeout callback the value of j is different.

setTimeout() - in for loop with random delay

3 Answers3

Linked