Does the JS engine create a new microtask that will execute every handler chained together in a Promise object when resolve is invoked?

Question

I recently encountered this question on Stack Overflow, asking about how the then method really works in JavaScript. The responder, Trincot, made the following comment:

The host will check which job queues have entries, giving precedence to job queues with high priority. A Promise job queue has a very high priority, typically higher than the event queue that deals with user interaction or other external events. So, the job that was placed in the queue at step 4 above is taken out of the Promise Job queue. This job will sequentially call the callback functions that have been registered as then callbacks (such as the one registered in step 7) on the myPromise object.

If I understood his explanation correctly, whenever the resolve function is invoked, JavaScript will schedule a microtask (or a job) in the job queue, which will execute all the callbacks passed to then, including chaining, when the call stack is empty. For example:

Promise.resolve("Hi")
    .then(() => {
        console.log("Hi");
    })
    .then(() => {
        console.log("World");
    });

In this case, the promise is resolved immediately, which means that a microtask will be scheduled immediately. When the then callbacks finish execution, the JS engine will check for any microtasks in the queue. Since the promise was resolved immediately, it will execute the microtask, which in turn executes all the handlers passed to the then method. As a result, the code will output "Hi" and "World".

However, why does this code output "1 3 2 4" instead of "1 2 3 4"?

const p1 = Promise.resolve();
const p2 = Promise.resolve();
p1.then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
});
p2.then(() => {
    console.log(3);
}).then(() => {
    console.log(4);
});

I believe the code should output "1 2 3 4" instead of "1 3 2 4". This is because, when p1 and p2 resolve, two microtasks are enqueued. As the then callbacks finish execution, they add these callbacks to their internal lists. Once the call stack is empty, the JS engine selects the oldest task from the queue and executes it. This task should execute all the then handlers passed to that specific Promise instance. However, it doesn't seem to be happening as expected. Could someone explain to me the reason behind this behavior?

Thanks for your time and have a great day!

Answer 1

when p1 and p2 resolve, two microtasks are enqueued.

That is a misunderstanding. A microtask (a promise job) is enqueued when:

• a then method is executed on a resolved promise
• a promise resolves and there was already a then method executed on it before it resolved: for each such then callback a separate job is created.

So when the first two statements have executed, there is nothing added to the promise job queue yet.

Realise that:

• when a then method executes, its callback is put on the promise job queue only when the promise was already resolved. Otherwise it is registered in wait for the promise to resolve.
• When a then method is executed, it returns a promise that is always pending, even when it is called on a resolved promise.

It may help to identify the promises returned by then() calls with a variable, and also name the callback functions.

This would make your script look like this:

const p1 = Promise.resolve();
const p2 = Promise.resolve();
const q1 = p1.then(function p1_then() { console.log(1) });
const r1 = q1.then(function q1_then() { console.log(2) });
const q2 = p2.then(function p2_then() { console.log(3) });
const r2 = q2.then(function q2_then() { console.log(4) });

Here is a simplified view on what happens in that script:

• The context identifies from where the current action is taken
• The action is the current statement that executes
• Each named promise has its own column: ? means it is pending; F means it is fulfilled.
• The last column lists the current entries in the Promise Job Queue

Context	Action	p1	p2	q1	r1	q2	r2	Promise Job Queue
Script	p1 = Promise.resolve()	F	-	-	-	-	-	-
	p2 = Promise.resolve()	F	F	-	-	-	-	-
	q1 = p1.then(p1_then)	F	F	?	-	-	-	p1_then
	r1 = q1.then(q1_then)	F	F	?	?	-	-	p1_then
	q2 = p2.then(p2_then)	F	F	?	?	?	-	p1_then,p2_then
	r2 = q2.then(q2_then)	F	F	?	?	?	?	p1_then,p2_then
Host	get job p1_then	F	F	?	?	?	?	p2_then
p1_then	console.log(1)	F	F	?	?	?	?	p2_then
p1_then	(return)	F	F	F	?	?	?	p2_then,q1_then
Host	get job p2_then	F	F	F	?	?	?	q1_then
p2_then	console.log(3)	F	F	F	?	?	?	q1_then
p2_then	(return)	F	F	F	?	F	?	q1_then,q2_then
Host	get job q1_then	F	F	F	?	F	?	q2_then
q1_then	console.log(2)	F	F	F	?	F	?	q2_then
q1_then	(return)	F	F	F	F	F	?	q2_then
Host	get job q2_then	F	F	F	F	F	?	-
q2_then	console.log(4)	F	F	F	F	F	?	-
q2_then	(return)	F	F	F	F	F	F	-
Host	nothing to do	F	F	F	F	F	F	-

Answer 2

Here's the order of execution:

1. The .then() handler for p1 logs 1 to the console.
2. The .then() handler for p2 logs 3 to the console.
3. The chained .then() handler for p1 logs 2 to the console.
4. The chained .then() handler for p2 logs 4 to the console.

so the order of process will be 1,3,2,4

Remember that while the code appears synchronous, Promise resolution and the execution of .then() handlers are asynchronous processes.