0

I have this but that doesn't seem to work

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    // My code
  }, 1000);
}

It works one time but then it will not work

Dominicentek Gaming
  • 127
  • 2
  • 10

3 Answers3

3

By using 1000 as your duration, it makes your code to look like it's only working for the first i instance. What happens here is, for loop executes quickly but each setTimeout for each i will almost be executed at the same time, but not exactly... there'll be split ms between each i.

let's say the loop executes within about 300ms with each i executed at 300ms / 5... this means each setTimeout will be just 300/5 ms behind the next one. So when this is executed, it will seem like the first i is the one that shows the desired result and the others don't.

However, based on what I think you're trying to achieve, you should instead try to create a Timeout delay of about 1000ms between each i. So you should do it this way:

for (let i = 0; i < 5; i++) {
  (function(i){
    setTimeout(function() {
    console.log(i);
    }, i*1000);
  })(i);
}
Mosia Thabo
  • 4,009
  • 1
  • 14
  • 24
1

I think you should multiply your time by i. If you only put your time, all the iterations will execute at the same time after 1000 ms.

So the code will be:

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    // My code
  }, 1000*i);
}
Luc Mosser
  • 43
  • 11
  • This won't work if `i` is declared with keyword `var`, it should be declared using `let` – matrixersp Sep 20 '20 at 10:48
  • @matrixersp good point. It's worth noting that it will still work but it will just keep outputting the last value of `i`, which will be 5 in this case. – Mosia Thabo Sep 20 '20 at 11:08
  • @MosiaThabo This solution works perfectly unless `// My code` should use variable `i`. Although in this case the `setInterval` solution is better, because it creates only one timer, while the `setTimeout` solution creates a new timer and anonymous function for each iteration. In addition, the `setInterval` solution allows you easily to interrupt the process whenever you need. – Victor Sep 20 '20 at 12:36
1

I think setInterval is better for this case:

let i = 0;
const interval = setInterval(function() {
    if(i == 4) clearInterval(interval);
    // My code
    console.log(i);
    i++;
}, 1000);
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48