Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

setTimeout() - in for loop with random delay [duplicate]

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.

like image 452
Pierre de LESPINAY Avatar asked Apr 20 '12 07:04

Pierre de LESPINAY


People also ask

Can we use setTimeout in for loop?

The setTimeout function callback isn't triggered until the for loop execution has completed. When the for loop has finished executing the value of i is 7. Now when the setTimeout call begins to execute it uses the last set value of i which is 7. Hence 7 is printed in all the setTimeout callbacks.

How do I set setTimeout multiple times?

Notes. The setTimeout() is executed only once. If you need repeated executions, use setInterval() instead. Use the clearTimeout() method to prevent the function from starting.

How do you delay a loop in JavaScript?

To create pause or delay in a JavaScript for loop, we should use await with a for-of loop. to define the wait function that returns a promise that calls setTimeout with resolve to resolve the promise in ms milliseconds. Then we define the loop function that runs a for-of loop to loop through an array.

What is the use of setTimeout () in JavaScript?

setTimeout() The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.


1 Answers

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.

like image 76
James Allardice Avatar answered Oct 05 '22 20:10

James Allardice