JavaScript: Callback execution strategy in browser using task and micro task queues

Quiz 1 - Codepen example console.log("Start"); setTimeout(function CB1() { console.log("Settimeout 1"); }, 0); setTimeout(function CB2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function CB3() { console.log("Promise 1"); }); Promise.resolve().then(function CB4() { console.log("Promise 2"); }); console.log("End"); Option 1 Start End Settimeout 1 Settimeout 2 Promise 1 Promise 2 Option 2 Start End Promise 1 Promise 2 Settimeout 1 Settimeout 2 Option 3 None of above

Quiz 1 - Codepen example console.log("Start"); setTimeout(function CB1() { console.log("Settimeout 1"); }, 0); setTimeout(function CB2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function CB3() { console.log("Promise 1"); }); Promise.resolve().then(function CB4() { console.log("Promise 2"); }); console.log("End"); Option 2 Start End Promise 1 Promise 2 Settimeout 1 Settimeout 2 Option 1 Start End Settimeout 1 Settimeout 2 Promise 1 Promise 2 Option 3 None of above

An overview of browser

Javascript Runtime (Simulator)

Javascript Runtime with micro task queue

Sources of callback function Group 1 - Keyboard events (keydown, keyup etc) - Mouse events (click, mouseup, mousedown etc) - Network events (online, offline) - Drag and drop events (dragstart, dragend )etc -Timer events (setTimeout(…), setInterval(…)) Group 2 - Promises (resolve(), reject()) - Browser observers - Mutation observer - Intersection Observer - Performance Observer - Resize Observer

Callbacks and queues used Task queue (Group 1) - Keyboard events (keydown, keyup etc) - Mouse events (click, mouseup, mousedown etc) - Network events (online, offline) - Drag and drop events (dragstart, dragend )etc -Timer events (setTimeout(…), setInterval(…)) Micro task queue (Group 2) - Promises (resolve(), reject()) - Browser observers - Mutation observer - Intersection Observer - Performance Observer - Resize Observer

Event loop - The event loop is the mastermind that orchestrates: - What JavaScript code gets executed? - When does it run? - When do layout and style get updated? - When do DOM changes get rendered? - Responsible to pick up the task from Task queue or Micro task queue and execute it in the callstack.

Event loop - pseudo code while(true) { task = eventLoop.nextTask(); // execute callback in the task queue if (task) { task.execute(); } // execute all callbacks in the micro task queue eventLoop.executeMicrotasks(); if (eventLoop.needsRendering()) { eventLoop.render(); } }

Execution strategy - If one task contains multiple micro tasks, all the callbacks queued in Micro task queue is executed first before picking up the next task from the task queue. - Before executing next task from the task queue, callstack should be empty.

Quiz 1 - answer

Quiz 2-two click listeners for one button Option 1 Listener 1 Promise 1 Listener 2 Promise 2 Settimeout 1 Settimeout 2 Option 2 Listener 1 Settimeout 1 Promise 1 Listener 2 Settimeout 2 Promise 2 var button = document.querySelector(".button"); button.addEventListener("click", function CB1() { console.log("Listener 1"); setTimeout(function ST1() { console.log("Settimeout 1"); }, 0); Promise.resolve().then(function P1() { console.log("Promise 1"); }); }); button.addEventListener("click", function CB2() { console.log("Listener 2"); setTimeout(function ST2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function P2() { console.log("Promise 2"); }); }); Option 3 None of above

Quiz 2-two click listeners for one button Option 1 Listener 1 Promise 1 Listener 2 Promise 2 Settimeout 1 Settimeout 2 Option 2 Listener 1 Settimeout 1 Promise 1 Listener 2 Settimeout 2 Promise 2 var button = document.querySelector(".button"); button.addEventListener("click", function CB1() { console.log("Listener 1"); setTimeout(function ST1() { console.log("Settimeout 1"); }, 0); Promise.resolve().then(function P1() { console.log("Promise 1"); }); }); button.addEventListener("click", function CB2() { console.log("Listener 2"); setTimeout(function ST2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function P2() { console.log("Promise 2"); }); }); Option 3 None of above

Quiz 2 - answer

Quiz 3 - answer

Quiz 3 - answer

Thank You!!

References - What the heck is event loop anyway ? - Jake Archibald: In The Loop - JSConf.Asia 2018 - Event loop explainer - and its pseudo code - JavaScript: How is callback execution strategy for promises different than DOM events callback?