Web API'de olay döngüsü (event loop) nasıl çalışır…

JavaScript'teki olay döngüsü (web tarayıcısı bağlamında) ana yürütme akışını englemeden asenkron işlemleri gerçekleştirmeyi sağlayan bir mekanizmadır. Birkaç bileşenden oluşur:

Heap (Yığın): Nesnelerin depolandığı bellek alanı.
Call Stack (Çağrı Yığını): Senkron fonksiyonların yürütülmesini izleyen LIFO veri yapısı.
Web API'ler: Tarayıcı tarafından sağlanır (DOM, AJAX, setTimeout, setInterval, Event Listeners vb.). JavaScript motorunun bir parçası değildirler.
Callback Queue (Geri Arama Kuyruğu) / Task Queue (Görev Kuyruğu): Asenkron görevleri yürütmek için mesaj kuyruğu.
Microtask Queue (Mikro görev Kuyruğu): Öncelikli mikro görevler için kuyruk (Promise.then(), async/await, queueMicrotask). Görev kuyruğundan önce çalıştırılır.
Event Loop (Olay Döngüsü): Sürekli olarak çağrı yığını ve kuyruğu kontrol eder. Yığın boşsa, mikro görev kuyruğundaki ilk işleyiciyi yığına taşır. Mikro görev kuyruğu boşaldığında, ilk görev işleyicisini görev kuyruğundan yığına taşır.

İşlem şu şekilde çalışır:

Senkron kod yürütülür ve fonksiyonlar çağrı yığınına eklenir.
Bir asenkron işlem (örneğin, setTimeout) ile karşılaşıldığında, ilgili Web API'ye aktarılır. Senkron kod yürütülmeye devam eder.
Web API, işlemi arka planda gerçekleştirir.
Asenkron işlem tamamlandığında, bu işlemin işleyicisi (callback) görev kuyruğuna (normal async işlemler için) veya mikro görev kuyruğuna (promisler için) eklenir.
Olay döngüsü sürekli olarak çağrı yığını kontrol eder. Yığın boşsa:
- Mikro görev kuyruğunu kontrol eder. İşleyiciler varsa, bunları yürütmek üzere çağrı yığına taşır, mikro görev kuyruğu boşalana kadar.
- Daha sonra görev kuyruğunu kontrol eder. İşleyiciler varsa, ilkini yürütmek üzere çağrı yığına taşır.
Bu süreç, ana akış engellenmeden asenkron işlemleri gerçekleştirmeye devam eder.

setTimeout ile örnek:

// Bu kod çağrı yığında yürütülür
console.log('Start');

// setTimeout - Web API. Callback, 0ms sonra görev kuyruğuna eklenir.
// Gerçek yürütme, olay döngüsü nedeniyle gecikebilir.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Bu kod, setTimeout'tan sonra çağrı yığında yürütülür
console.log('End');

// Çıktı:
// Start
// End
// Timeout

Promislerle örnek:

// Çağrı yığında yürütülür
console.log('A');

// Promise. then() callback'i mikro görev kuyruğuna eklenir
Promise.resolve().then(() => {
  console.log('B');
});

// Çağrı yığında yürütülür
console.log('C');

// Çıktı:
// A
// C
// B

Web API'de olay döngüsü (event loop) nasıl çalışır?