حلقة الأحداث وأساسيات 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

اختبار المهام الصغيرة مقابل المهام

مراجعة