Event Loop وعمق البرمجة غير المتزامنة

                  Call Stack
            ┌─────────────────┐
            │     task()       │
            │   callback()     │
            │    main()        │
            └─────────────────┘
                    │
            ┌───────┴───────┐
            │   Event Loop   │
            └───────┬───────┘
                    │
     ┌──────────────┴──────────────┐
     │  Task Queue (Macrotasks)    │
     │  [setTimeout, setInterval,  │
     │   I/O, UI events]           │
     └─────────────────────────────┘
     ┌─────────────────────────────┐
     │  Microtask Queue            │
     │  [Promise.then, queueMicro- │
     │   task, MutationObserver]    │
     └─────────────────────────────┘

function multiply(a, b) { return a * b; }
function square(n) { return multiply(n, n); }
console.log(square(5));
// المكدس: main → square → multiply → square → main

console.log("1");                    // سطر عادي

setTimeout(() => console.log("2"), 0); // Macrotask

Promise.resolve().then(() =>
  console.log("3")                   // Microtask
);

console.log("4");                    // سطر عادي

// الإخراج: 1, 4, 3, 2

async function demo() {
  console.log("A");
  await Promise.resolve();
  console.log("B");
}

demo();
console.log("C");

// الإخراج: A, C, B
// (لأن console.log("B") صار Microtask)

function animate() {
  element.style.left = x + "px";
  requestAnimationFrame(animate); // يُنفّذ قبل الرسم التالي
}

function processLargeArray(items) {
  let i = 0;
  function chunk() {
    const end = Math.min(i + 100, items.length);
    for (; i < end; i++) process(items[i]);
    if (i < items.length) setTimeout(chunk, 0); // أفسح المجال للـ UI
  }
  chunk();
}