CODEWITHSUNDEEP
javascriptjquery
L0laapk3
L0laapk3

Reputation: 958

setTimeout wait for setTimeout

I stumbled upon a problem: the code is supposed to output "hi1" "hi2" "hi3" "hi4" in that order. I wrote this simplified code, the actual code is more complicated and causes me to not be able to remove some of the functions I marked.

function test() {
    console.log("hi2");
    setTimeout(function () { //maybe replace this?
    console.log("hi3");
    }, 2000);
}

console.log("hi1");
test();
setTimeout(function () { //cannot get rid of this
    console.log("hi4");
}, 0);

how do I make it output in order?

Upvotes: 2

Views: 8176

Answers (3)

scf1001
scf1001

Reputation: 251

As others have pointed out setTimeout is asynchronous so they run in the background while the rest of the code continues. I'd guess that at the moment you get something like:

hi1
hi2
hi4
then a 2000ms delay, then
hi3

If you can't change the code much then try changing the delay for hi4 to 4000 like:

setTimeout(function () { //cannot get rid of this
    console.log("hi4");
}, 4000);

That should fix the order, but it's still pretty messy and unreliable. I'd rather have something like:

function showMessage(msg, delay) {
    setTimeout(function() {
        console.log(msg);
    }, delay);
}
showMessage('hi1', 0);
showMessage('hi2', 2000);
showMessage('hi3', 4000);
showMessage('hi4', 6000);

Upvotes: 0

chenxiaochun
chenxiaochun

Reputation: 11

Use the callback or try to show your complicated code is more. We can help you to analyze it.

Upvotes: 0

marcoseu
marcoseu

Reputation: 3952

If you need to wait for setTimeout in your test() to execute before continuing, the easiest way is to use callback:

function test(callback) {
    console.log("hi2");
    setTimeout(function () {
        console.log("hi3");
        // Execute additional logics
        callback();
    }, 2000);
}

console.log("hi1");
test(function () {
    setTimeout(function () {
        console.log("hi4");
    }, 0);
});

Upvotes: 1

Related Questions