Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 582
olidev Avatar asked Aug 27 '10 11:08

olidev


People also ask

How do you put a delay in a for loop?

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.

How do you write a delay in JavaScript?

To delay a function call, use setTimeout() function. functionname − The function name for the function to be executed. milliseconds − The number of milliseconds. arg1, arg2, arg3 − These are the arguments passed to the function.

How do you delay 1 second in JavaScript?

To delay a function execution in JavaScript by 1 second, wrap a promise execution inside a function and wrap the Promise's resolve() in a setTimeout() as shown below. setTimeout() accepts time in milliseconds, so setTimeout(fn, 1000) tells JavaScript to call fn after 1 second.


1 Answers

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
like image 150
Daniel Vassallo Avatar answered Sep 19 '22 03:09

Daniel Vassallo