While loop with 1second breaks

Question

I am running a while loop which prints the number of iterations of the loop one after another each in one console line.

<script>

var i = 0;

  while (i < 10) {
    console.log("The number is " + i);
    i++;
  }

</script>

However, I would like to introduce a pause of 1 second between each console.log output. I searched on the internet and stackoverflow for solutions and came across setTimeout().

<script>

var i = 0;

  while (i < 10) {
    setTimeout(function (){console.log("The number is " + i)}, 1000);
    i++;
  }
</script>

But when I introduce setTimeout() into my code, instead of printing each number with a pause of 1 second inbetween into a seperate console line, after one second the number 10 is printed.

Can you use setInterval instead: var i = 0, interval = setInterval(function() { console.log("This number is " + i); if (++i > 9) { clearInterval(interval); } }); — Phil, Jul 18 '19 at 15:56
That's not how `setTimeout` works. I think you need to read up on asynchrony a bit. Here's a good place to start: https://github.com/twang281314/frontEnd/blob/master/book/You%20Don't%20Know%20JS/You%20Don't%20Know%20JS-%20Async%20%26%20Performance(O'Reilly%2C2015).pdf — JLRishe, Jul 18 '19 at 15:58
Possible duplicate of [Javascript - display incrementing number every second](https://stackoverflow.com/questions/26271084/javascript-display-incrementing-number-every-second) and [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486) — adiga, Jul 18 '19 at 16:00
Even if you increment the delay by doing `1000*i` you will still have same number printed each time. See [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — charlietfl, Jul 18 '19 at 16:01
Possible duplicate of [How do I add a delay in a JavaScript loop?](https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — ponury-kostek, Jul 18 '19 at 16:16

wang · Accepted Answer · 2019-07-18T16:19:35.587

instead of printing each number with a pause of 1 second inbetween into a seperate console line, after one second the number 10 is printed.

That's because you are sharing i which does not wait for your setTimeout

you can use let to define block-level variable inside while block

var i = 0
while(i < 10) {
  let scopeVariable = i
  setTimeout(() => console.log(scopeVariable), i * 1000)
  i++
}

You can achieve same thing in various way

using for loop

for(let i = 0; i < 10; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

using recursive function

function increaseNumber(start, end, cur = start, interval = 1000) {
  if (cur === end) return
  console.log(cur)
  setTimeout(() => increaseNumber(start, end, cur + 1, interval), 1000)
}

increaseNumber(0, 10)

using setInterval

var i = 0
var handler = setInterval(() => {
  if (i === 10) {
    clearInterval(handler)
    return
  }
  console.log(i)
  i++
}, 1000)

While loop with 1second breaks

1 Answers1