how to make setTimeout() work as it looks like in for-loop?

Question

how to make setTimeout() work as it looks like in for-loop? like this code

function hello() {
    for (let index = 0; index < 3; index++) {
        setTimeout(function () {
            console.log('What\'s up!')
        }, 3000)
        console.log('Yo')
    }
}

hello()

it logs

Yo
Yo
Yo
What's up!
What's up!
What's up!

How can I make it logs

Yo
What's up(after 3 sec)
Yo
What's up(after 3 sec)
Yo
What's up(after 3 sec)

Thanks for your help.

Answer 1

One way to do it is this:

 function hello() { for (let index = 1; index <= 3; index++) { setTimeout(function () { console.log('What\\'s up!') }, 3000 * index) setTimeout(function () { console.log('Yo') }, 3000 * (index - 1)) } } hello() 

I basically made use of the for loop index to give each console.log call a different delay. Note how "Yo" is always 3000 ms ahead of "What's up".

Answer 2

You need either Promise or recursion for operations like this.

Promise (without async/await )

 async function hello(index = 0) { if (index >= 3) return; index += 1; return new Promise(function(resolve){ setTimeout(function(){ console.log('What\\'s up!'); resolve(); }, 3000); console.log('Yo'); }).then(hello.bind(null, index)); } hello() 

Promise (with async/await )

 async function hello() { for (let index = 0; index < 3; index++) { await Promise.all([ new Promise(function(resolve){ setTimeout(function(){ console.log('What\\'s up!'); resolve(); }, 3000); }), console.log('Yo') ]); } } hello() 

Recursion

 function hello(index = 0) { if (index >= 3) return; setTimeout(function(){ console.log('What\\'s up!'); hello(index); }, 3000); console.log('Yo'); index++; } hello() 

PS : Codes above assume you use ES2017 and above.

Answer 3

setTimeout() will not give you desired result even if you put 0 waiting time. Either put both the console.log in setTimeout() or remove setTimeout().

Answer 4

You need something like this:

 const times = 3; var n = 0; function logYo(){ console.log('Yo'); logWhatsUp(); } function logWhatsUp(){ setTimeout(() => { console.log('Whats Up'); n++; if(n < times) logYo(); }, 3000); } logYo(); 

Answer 5

You can just make a function which executes itself with setTimeout() but you would have to incorporate a global function as a counter.

let counter = 0;
function hello(n){
    console.log("Yo");
    console.log("What's up?);
    counter++;
    if(counter > n){
        setTimeout(hello, 3000);
    }
}

Answer 6

If you want to output every 3 seconds another pair of logs, take a look at the following snippet using async/await and promises :

 async function hello() { for (let index = 0; index < 3; index++) { console.log('Yo'); await new Promise(resolve => { setTimeout(function () { console.log('What\\'s up!'); resolve(); }, 3000); }); } } hello(); 

Make sure you check out for example caniuse to check whether the browsers you want to support is supporting async/await and Promise though.