How to set a function to execute later in Javascript if it will take a long time?

by 
function wait() {
    let a = Date.now()
    while (Date.now() - a < 3000) {
        //loop
    }
    console.log('waiting ends...')
}
function start(){
    console.log('starts...')
    wait()
}
function end(){
    console.log('ends...')
}

start()
end()

How can I set wait() execute asynchronously that lead to a output of “starts…, ends…, waiting ends…” without apply setTimeout function to wait()?

  • without apply setTimeout function to wait – what’s wrong with setTimeout?

    – 

  • I am still learning, so I want to ensure I know as much alternative ways as possible

    – 

You can convert wait() to an async function an use await to postpone the rest of the function’s body:

async function wait() {
    await true;
    let a = Date.now()
    while (Date.now() - a < 3000) {
        //loop
    }
    console.log('waiting ends...')
}
function start(){
    console.log('starts...')
    wait();
}
function end(){
    console.log('ends...')
}

start()
end()

Or you can do it with start():

function wait() {
    let a = Date.now()
    while (Date.now() - a < 3000) {
        //loop
    }
    console.log('waiting ends...')
}
async function start(){
    await console.log('starts...')
    wait();
}
function end(){
    console.log('ends...')
}

start()
end()

You can use queueMicrotask() to execute a function as a microtask (the same as immediately resolving a promise):

function wait() {
    let a = Date.now()
    while (Date.now() - a < 3000) {
        //loop
    }
    console.log('waiting ends...')
}
function start(){
    console.log('starts...')
    queueMicrotask(wait);
}
function end(){
    console.log('ends...')
}

start()
end()

Leave a Comment