Event Loop และพื้นฐาน Task กับ Microtask

รู้จักลูปเหตุการณ์

ทำงานทันทีเป็นอันดับแรก

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");

พื้นฐานคิวงาน

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");

พื้นฐานงานจุลภาค

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");

ตัวอย่างลำดับการทำงาน

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");

ตัวอย่าง queueMicrotask

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny

แบบทดสอบงานจุลภาคกับงาน

ทบทวน