为什么我的超时要等到等待完成后才出现，而我的日志却没有？

Question

If I have something like this setup:

<-- language: lang-javascript -->

console.clear();

// noprotect

const fetchSomething = () => new Promise((resolve) => {
    setTimeout(() => resolve('future value'), 500);
});

async function asyncFunction() {
    const result = await fetchSomething();
    console.log('waiting');
    setTimeout(()=>console.log('waiting?'), 250);
    return result + ' 2';
}

asyncFunction().then(result => console.log(result));

And my output looks like:

"waiting"
"future value 2"
"waiting?"

I would expect the waiting? to execute before the result completes, but for some reason it waits on the function. What makes one wait but the other execute?

Answer 1

It is a feature of Asynchronous programming.

You have to add await and wrap your setTimeout(()=>console.log('waiting?'), 250); with a function which returns Promise in order to make it look like it was evaluated continuously.

Something like:

await ((ms) =>{
        console.log('waiting?');
        return new Promise(resolve => setTimeout(resolve, ms));
    })(250);

Or:

await (() => new Promise(resolve => setTimeout(()=>{
    console.log('waiting?');
    resolve();
}, 250)))();

Mind you, JS has a single threaded run-time engine, so it interrupts evaluation when original script reaches it's end.

And function in setTimeout(function, timeout) is evaluated by JS when it has a first chance and time is right.

So your function was interrupted twice and was resumed twice.

Answer 2

The call to log "waiting?" is started by a setTimeout after the await has finished, so after the 500ms in fetchSomething have already passed. It will only execute 250ms after fetchSomething has returned. That is enough time for asyncFunction to return.

If you want to see a different behaviour, start the timer for logging "waiting?" before calling await:

async function asyncFunction() {
  setTimeout(()=>console.log('waiting?'), 250);
  const result = await fetchSomething();
  console.log('waiting');
  return result + ' 2';
}