Micro/Macro task execution order is wrong

[CaryWill]

Request type

• [ ] Correction or update

Details

Page URL

It should produce the same result.

The first time getData function get's called, control flow comes to else clause, which enqueues a microtask, then inside the microtask, it triggers a load event which in turn enqueues a task to the event loop, so, it should print out,

Fetching data
Data fetched
Loaded data

The second time getData function get's called, control flow comes to if...else clause, which just enqueues a task to the event loop, so, it should also print out,

Fetching data
Data fetched
Loaded data

No matter what type of task(micro/macro) get's enqueued, the stack should be emptied first, which, the two console.log should get's called first.

Created a Demo

[CaryWill]

Unlike "native" events, which are fired by the DOM and invoke event handlers asynchronously via the event loop, dispatchEvent() invokes event handlers synchronously. All applicable event handlers will execute and return before the code continues on after the call to dispatchEvent().