function setTimeout in loop

Question

If I use setTimeout in a loop so only after the loop ends it executes all the operation in the same time. I tried to put setTimeout in a separate function, as suggested by many articles, but it does not help. The code is very simple:

function foo(i)
{
    setTimeout( function() {console.log(i);}, 2000);
}

for (let i=0; i<5; i++)
{
    foo(i);
}

It prints 0 1 2 3 4 in one shot

Sure because JavaScript is asynchronous. which means you call the foo function immediately 5 times. Or let's say, talk to JavaScript: Give me print out 0 in 2 secs, and 1 in 2 secs... So after 2 secs, you get the result one by one. — Remi Guan
– Remi Guan, Commented Dec 4, 2020 at 0:36
Suggested to read the JavaScript Info Tutorial has part Nested SetTimeout. — Remi Guan
– Remi Guan, Commented Dec 4, 2020 at 0:38

Daniel B. · Accepted Answer · 2020-12-04 00:36:19Z

1

It's because the proccess registry the 5 setTimeout at almost the same time.

Try with the different timeout time like this:

function foo(i)
{
    setTimeout( function() {console.log(i);}, 1000 * i);
}

for (let i=0; i<5; i++)
{
    foo(i);
}

answered Dec 4, 2020 at 0:36

Daniel B.

1812 silver badges6 bronze badges

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

4 Comments

Oz Harary Over a year ago

Working! Whats the reason that it doesnt print after 1 seconds and 2 seconds and 3 seconds etc...? Do you have a good source to read?

Remi Guan Over a year ago

@OzHarary OP if you found this answer is useful, please accept it by clicking the check mark which's at the left side of an answer. Which means it solved your problem.

Phix Over a year ago

@OzHarary in the original post you're queueing 5 executions of the setTimeout with a 1 second delay immediately, whereas this takes the loop count into account.

Mister Jojo Over a year ago

setTimeout( console.log, 1000 * i, i);

Bryan Dellinger · Accepted Answer · 2020-12-04 01:18:21Z

1

you could also do it with a generator. a generator can pause midway through a function https://www.javascripttutorial.net/es6/javascript-generators/

function* generator() {
    let index = 1;
    while (index <= 5) {
        yield index++;
    }
}

let f = generator();


var interval = window.setInterval(function(){
  const obj = f.next();
   if (obj.done){
   clearInterval(interval);
   } else {
    console.log(obj.value)
   }
}, 1000);

answered Dec 4, 2020 at 1:18

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

Collectives™ on Stack Overflow

function setTimeout in loop

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related