How do I add a delay in a JavaScript loop?
javascript, loops, sleep
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
Problem
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.