Basically, this article covers following sub topics
- Quiz to predict the output of the sample JS code.
- An overview of browser, event loop, JS engine, event loop queues.
- How browser executes DOM events(click, http requests) and its callback?
- How is callback execution strategy for promises different than DOM events callback?
- Different execution strategy of tasks queued in Task queue and Micro task queue.
- What kind of tasks are queued in Task queue and Micro task queue?
- Conclusion (Answers to the quiz).
- Quiz to predict the output of the sample JS code
Test 1: What would be the sequence of log messages of following JS code?
Running example can be found here .
Test 2: We have a button with two click event listeners on the same button as shown in the code sample below.
Running example can be found here . Please try to predict the order of log messages when a button is clicked?
If we have correct versions of browsers, output of the above code samples are as follow
Test 1: Start, End, Promise 1, Promise 2, Settimeout 1, Settimeout 2