Example Callstack And Event loop

|

Example callstack and event loop

#Example

async function abc() {
  console.log(8);
  await Promise.resolve(2).then(console.log);
  console.log(3); // same .then(() => console.log(3))
}

setTimeout(() => console.log(1), 0);
abc();
Promise.resolve(4).then(console.log);
console.log(6);
js

#Information

Note

  • Macrotasks: setTimeout , setInterval , setImmediate , requestAnimationFrame , I / O , giao diện người dùng render
  • Microtasks: process.nextTick , Promises , queueMicrotask , MutationObserver

#Explain

1. Chạy `setTimeout` => push `log(1)` vào `MacroTask Queue`

2. Chạy func `abc` => `log(8)` => push `log(2)` vào `MicroTask Queue` => `await`
   `Output: 8`

3. push `log(4)` vào `MicroTask Queue`

4. `log(6)`
   `Output: 8 6`

5. Thực thi `MicroTask Queue` có 2 callback `log(2)` và `log(4)`
   `log(2)` => coi `log(3) là .then(() => log(3))` push `log(3)` vào `MicroTask Queue`
   `log(4)` => `log(3)`

   `Output: 8 6 2 4 3`

6. `MicroTask Queue` đã rỗng kết thúc turn => bắt đầu 1 turn mới thực thi `MacroTask Queue` có 1 callback `log(1)`
   `log(1)`
   `Output: 8 6 2 4 3 1`
md