Agfdhyk

I'm studying about javascript event loop, and I tried some complex and nested async codes, and one of them complicated me so much. The code snippet looks like：

console.log(1);

new Promise((resolve, reject) => {

    console.log(2);

    resolve();

}).then(() => {

    setTimeout(() => { console.log(3) }, 0);

});

setTimeout(() => {

    new Promise((resolve, reject) => {

        console.log(4);

        resolve();

    }).then(() => { console.log(5) });

});

And the result sometimes is 1 - 2 - 4 - 5 - 3, and sometimes is 1 - 2 - 4 - 3- 5.

It performs the same in browser environment and node environment.

Maybe my code is written wrong, or there are some issues exist in V8 resolving event loop?

Callback execution order is not really deterministic. Whenever a Promise resolves, a task that executes the .then() chain gets pushed onto the Eventqueue. The same happens when a timer resolves. As timers run concurrently, they might not finish exactly in the order they were started, if they are close to each other.

  main code executes (1) {

    promise (2) gets pushed onto the queue

    promise (4) gets pushed onto the queue

  }





  promise resolves (2) {

    a 0ms timer gets set (3)

  }



 // maybe the timer is done already (3)



 promise resolves(4)



 // maybe the timer is done now (3)

You are combining two things: Promise.resolve and window.setTimeout. The former runs synchronously and places the resolved item in the queue immediately. The window.setTimeout however has a different approach. It start to handle the provided function once the timer has expired. When using 0 as delay in window.setTimeout as you have used in your first promise:

setTimeout(() => { console.log(3) }, 0);

then it does not mean "run this immediately". It is more "run this function as soon as possible". That can be changed because the timer is being throttled by browsers. If you do not have problems to read some specs, you can read timer-initialisation-steps to comprehend how it is being initialized in detail.

There is a more easier-to-read information on MDN: Reasons for delays longer than specified

Dependent of the browser/engine, the engine might be busy with (background) tasks so that timers gets throttled. As you have experienced yourself, there is a situation where you are getting different results. The minimum throttling time is (according to the specs, but browsers can use a different value) 4ms. The end result is that the function in the throttled timer gets executed after the another timer that did not got throttled.