Tasks, microtasks execution order in javascript - snippet example

What is the order in which the following texts are logged via console.log ?

console.log('1 - start');
setTimeout(() => console.log('2 - setTimeout1'), 0);
Promise.resolve('Success')
    .then(()=> console.log('3 - promise1'))
    .then(()=> console.log('4 - promise2'));
setTimeout(() => console.log('5 - setTimeout2'), 0);
console.log('6 - end');

Output

1 - start// statement is executed directly in the script (first "Run script" task)
5 - end // part of the first "Run script" task gets executed too
3 - promise1 // placed in microTasks queue and executed between tasks, after first "Run script" task is ready
4 - promise2 // microtask added  during previous microtask execution  and executed immediately
2 - setTimeout1 // callback execution scheduled in another task in the "macroTasks" queue (also task queue), executed in the next interation of the event-loop
5 - setTimeout2 // callback execution scheduled in another task in the task queue, executed in the next iteration of event-loop

Reference - https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Dynamically expand angular material panel when condition met

Dynamically expand angular material panel when condition met code snippet Continue reading

Copy to clipboard with angular material

Published on October 12, 2022