Pętla zdarzeń i podstawy zadań oraz mikrozadań

Wprowadzenie do pętli zdarzeń

Najpierw kod synchroniczny

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

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

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

Podstawy kolejki zadań

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

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

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

Podstawy mikrozadań

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

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

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

Przykład kolejności

// 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");

Przykład 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

Quiz: mikrozadanie a zadanie

Podsumowanie