Event Loop & Asenkron Yapı

Event Loop & Asenkron Yapı: JavaScript'in Event Loop'unu anlamak, Playwright testlerindeki timing sorunlarını çözmek için şarttır.

JavaScript'in Event Loop'unu anlamak, Playwright testlerindeki timing sorunlarını çözmek için şarttır. JavaScript tek iş parçacıklıdır (single-threaded): aynı anda yalnızca bir işlem yapılabilir — tıpkı tek kasiyer olan bir markette sıraya girmek gibi. Peki bu tek kasiyer ağ istekleri veya zamanlayıcılar gibi uzun işlemleri nasıl bloke etmeden yönetir? Web APIs'e havale eder: `fetch()`, `setTimeout()` gibi işlemler tarayıcının arka plan servislerine devredilir ve tamamlanınca callback kuyruğuna (Callback Queue) alınır. Event Loop, Call Stack boşaldığı anda kuyruktaki işi alır ve çalıştırır. Neden Java'dan farklı? Java multi-thread çalışır: ağ isteği için yeni bir thread açılır. JavaScript tek thread'de asenkron işleri sıra ile yönetir — `async/await` bu sırayı zarif ve okunabilir hale getirir. Playwright `await` kullanmak zorundadır çünkü tüm browser aksiyonları asenkron Promise döndürür.

Event Loop Mekanizması

Call Stack (Çalışma Kuyruğu)

Web API (Arka Plan Görevleri)

Callback Queue (Sıra Bekleyenler)

Event Loop (Bekçi/Döngü)

🎬 A, D, C, B: Event Loop Sırasının Perde Arkası

Microtask Queue (Promise)

Macrotask Queue (setTimeout)

Kod çalışır: `console.log("A")`, `setTimeout(()=>console.log("B"),0)`, `Promise.resolve().then(()=>console.log("C"))`, `console.log("D")`. Çıktı sırası ne olur?

Adım 1 — Call Stack senkron kodu SIRAYLA çalıştırır: önce `"A"` basılır. `setTimeout` ise Web API'ye HAVALE edilir, Call Stack'i beklemez.

Adım 2 — `Promise.resolve().then(...)` çağrılır: bu callback hemen Microtask Queue'ya konur (Call Stack'i bloklamaz). Ardından `console.log("D")` senkron olarak çalışır ve `"D"` basılır.

Adım 3 — Call Stack artık TAMAMEN boş: senkron kod (`A`, `D`) bitti. Event Loop kuralı gereği ÖNCE Microtask Queue tamamen boşaltılır — `"C"` basılır.

Adım 4 — Microtask Queue tamamen boşaldıktan SONRA Event Loop, Macrotask Queue'ya (`setTimeout` callback'i) bakar ve onu Call Stack'e sokar — `"B"` en son basılır.