Async JavaScript

TODO: Call Stack ทบทวน

TODO: ทบทวน Call Stack — function ถูก push เมื่อเรียก, pop เมื่อ return — พร้อมตัวอย่าง function ซ้อนกัน

TODO: Web APIs และ Task Queue

TODO: อธิบายว่า setTimeout, DOM events ไม่ได้อยู่ใน JS engine โดยตรง แต่เป็น Web API — callback จะถูกส่งเข้า Task Queue เมื่อ API ทำงานเสร็จ

TODO: Event Loop Algorithm

TODO: อธิบายขั้นตอน — Event Loop ตรวจสอบ Call Stack ว่าว่างหรือยัง ถ้าว่างให้ดึง task จาก Task Queue มาทำ — พร้อมภาพประกอบ

TODO: setTimeout(fn, 0) และ Blocking

TODO: แสดงให้เห็นว่า setTimeout(fn, 0) ไม่ได้ทำงานทันที แต่ต้องรอ Call Stack ว่างก่อน พร้อมตัวอย่าง loop นับเลขสูง

console.log("เริ่ม");

setTimeout(() => {
  console.log("callback จาก setTimeout");
}, 0);

// TODO: synchronous loop ที่ใช้เวลานาน
for (let i = 0; i < 1e9; i++) {}
console.log("จบ loop");

TODO: อย่าบล็อก Event Loop

TODO: อธิบายว่า long-running synchronous task จะบล็อก Event Loop ทำให้ UI freeze และ callback ทั้งหมดต้องรอ

TODO: Lab 1

TODO: Add lab exercise with check-playground here.