1

Sample code:

async function foo(i) {
  await new Promise(resolve => setTimeout(resolve, 5000));
  console.log('Completed foo', i);
}

async function bar(i) {
  await new Promise(resolve => setTimeout(resolve, 5000));
  console.log('Completed bar', i);
}

for (let i = 0; i < 10; i++) {
  foo(i);
  console.log('Fired', i);
  await bar(i);
}

console.log('Done firing all async functions, unblocking...');

When I run this I get an error in the last line of the for loop indicating I can only await inside an async function.

Anyways, this question is to ask - when the for loop's 1st iteration is being executed, foo will immediately be added to the task queue. Then console log will run printing Fired. Then it will add bar to the task queue and await for the response. Hence block the for loop iterations until the bar execution completes.

At this point, Main thread is free. What is the behaviour in terms of whether foo or bar will be picked up from the task queue and put into the stack for execution by the main thread?

variable
  • 8,262
  • 9
  • 95
  • 215
  • "*When I run this I get an error in the last line of the for loop indicating I can only await inside an async function.*" then run it in an async function: https://jsbin.com/tayivuq/edit?js,console – VLAZ Feb 17 '22 at 19:49
  • "*foo will immediately be added to the task queue*" no, it will run until the `await` *then the awaited expression's value* will be put on the microtask queue and `foo()` will be suspended. Then *when that value is resolved*, `foo()` will be unsuspended and put on the microtask queue to continue. – VLAZ Feb 17 '22 at 19:50
  • I opened your link, it shows output as Fired and 0 – variable Feb 17 '22 at 19:51
  • Did you wait for 5 seconds for the resolution of the two promises? EDIT: wait, there is a hack needed for JSBin specifically: https://jsbin.com/bayatuj/1/edit?js,console the `//noprotect` comment ensures that JSBin doesn't terminate the loop early. It does that if it *seems* like it takes too long (the heuristics is not very smart). – VLAZ Feb 17 '22 at 19:53
  • Sorry I get you now. I'm confused as to since you say main thread enters inside the foo (in each iteration), then why won't it block when it encounters the await. I will learn about this as it's not clear in my head. – variable Feb 17 '22 at 19:55
  • 1
    Check the edit of my comment if you haven't. – VLAZ Feb 17 '22 at 19:57
  • I'm your 2nd comment from top, you say `it will run until the await then the awaited expression's value will be put on the microtask queue` - isn't only the resolution put into the queue? Where as the Promise will be added into some other api (js engine component)? – variable Feb 17 '22 at 20:06
  • Probably oversimplified there - the promise doesn't do anything. It is a notification mechanism for the async task. Once it is resolved, there is usually some sort of followup. *That* goes on the microtask queue. If you have `p.then(x => x+1)` and `p` resolves with `41` then you essentially get `() => 42+1` on the microtask queue. If you have `x = await p; x + 1;` the `await` is syntactic sugar over normal promise API, so you get an equivalent. Might be of use: [Please point out the misfacts in my learning regarding Asynchronous Javascript](https://stackoverflow.com/q/65833787) – VLAZ Feb 17 '22 at 20:11

0 Answers0