javascriptloopssleep

How do I add a delay in a JavaScript loop?


I would like to add a delay/sleep inside a while loop:

I tried it like this:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Only the first scenario is true: after showing alert('hi'), it will be waiting for 3 seconds then alert('hello') will be displayed but then alert('hello') will be repeatedly constantly.

What I would like is that after alert('hello') is shown 3 seconds after alert('hi') then it needs to wait for 3 seconds for the second time alert('hello') and so on.


Solution

  • The setTimeout() function is non-blocking and will return immediately. Therefore your loop will iterate very quickly and it will initiate 3-second timeout triggers one after the other in quick succession. That is why your first alerts pops up after 3 seconds, and all the rest follow in succession without any delay.

    You may want to use something like this instead:

    var i = 1;                  //  set your counter to 1
    
    function myLoop() {         //  create a loop function
      setTimeout(function() {   //  call a 3s setTimeout when the loop is called
        console.log('hello');   //  your code here
        i++;                    //  increment the counter
        if (i < 10) {           //  if the counter < 10, call the loop function
          myLoop();             //  ..  again which will trigger another 
        }                       //  ..  setTimeout()
      }, 3000)
    }
    
    myLoop();                   //  start the loop

    You could also neaten it up, by using a self invoking function, passing the number of iterations as an argument:

    (function myLoop(i) {
      setTimeout(function() {
        console.log('hello'); //  your code here                
        if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
      }, 3000)
    })(10);                   //  pass the number of iterations as an argument