https://medium.com/@jitubutwal144/javascript-how-is-callback-execution-strategy-for-promises-different-than-dom-events-callback-73c0e9e203b1

1. Callback execution strategy in browser
using task and micro task queues
- Jitendra Kasaudhan
- Web developer @check24de
- Twitter: @jitubutwal144

2. 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

3. 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

4. What the heck is event loop anyway?
Source: https://www.youtube.com/watch?v=8aGhZQkoFbQ - By @philip_roberts

5. Javascript Runtime

6. Javascript Runtime with micro task queue

7. 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

8. 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

9. 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.

10. 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();
}
}

11. 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.

12. Quiz 1 - answer

13. 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

14. 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

15. Quiz 2 - answer

16. Quiz 3 - answer

17. Quiz 3 - answer

18. Thank You!!

19. 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?