EP-15 | Asynchronous Js & Event Loop

Author: deep100x

Namaste-JavaScript/Ep-15-Async-Event-Loop.js

@@ -0,0 +1,55 @@
+function a () {
+  console.log("a");
+}
+a()
+console.log("End");
+
+// Callstack is in js Engine is in Browser
+
+console.log(("Start"));
+
+setTimeout(function cb () {
+  console.log("Callback");
+},5000)
+console.log("End");
+
+console.log("Start");
+document.getElementById("clickMe").addEventListener("click",function cb () {
+  console.log("Callback")
+})
+console.log("End");
+
+// 🟨Event Loop : Continuously monitor callstack and callback queue
+//                ... If this call stack is empty and EventLoop sees this there is also a function waiting to be executed inside callbackQueue...
+//                it just takes the function and put it inside the callstack... and callback method is quickly executed...
+
+// Promises Mutation Observer 
+
+console.log("start");
+setTimeout(function cbT () {
+  console.log("CB Netflix");
+},5000);
+
+fetch("https://api.netflix.com").then(function cbF () {
+  console.log("CB Netflix");
+})
+console.log("End");
+
+
+// Callstack :   │                                              │
+//               │                                              │
+//               │                                              │
+//               │                                              │
+//               │  2nd cbT => Run => Removed from callstack    │
+//               │  1st cbF => Run => Removed from callstack    │
+
+
+// Micro Task Que   :│ cbF │  │  │  │  │  │  │  │  │  │  │  │  │         // prioritized  1st goes into callstack
+
+// Callback Queue   :│ cbT │  │  │  │  │  │  │  │  │  │  │  │  │         // after cbF
+
+
+//   1  Start
+//   2  End
+//   3  cbF
+//   4  cbT