Frontend Academy · Ders

Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler

Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

JavaScript Tek İş Parçacıklıdır

JavaScript tek bir iş parçacığında çalışır; aynı anda yalnızca tek bir kod parçasını çalıştırabilir. Buna rağmen binlerce asenkron işlemi (ağ istekleri, zamanlayıcılar, kullanıcı arayüzü olayları) engelleme yapmadan yönetir. Nasıl mı? Olay döngüsü sayesinde.

Çağrı Yığını

Çağrı yığını, JavaScript'in o anda hangi işlevin çalıştığını takip ettiği yerdir. Bir işlev çağrıldığında bir çerçeve yığına eklenir. İşlev döndüğünde çerçeve yığından çıkarılır. Yığın dolarsa (sonsuz özyinelemede olduğu gibi) yığın taşması alırsınız.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

Web API'leri — İş Yükünü Devretme

JavaScript bir asenkron işlevi (setTimeout, fetch, addEventListener) çağırdığında iş, tarayıcıdaki bir API'ye devredilir. JS motoru sonraki satırla devam eder; beklemez.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

Görev Kuyruğu (Makro Görev Kuyruğu)

Bir Web API işlemi tamamlandığında (zamanlayıcı çalıştığında veya fetch resolve edildiğinde), geri çağırma işlevi görev kuyruğuna (makro görev kuyruğuna) eklenir. Olay döngüsü, geri çağırma işlevini yalnızca çağrı yığını boş olduğunda çağrı yığınına taşır.

Mikro Görev Kuyruğu

Promise'ler mikro görev kuyruğunu (yüksek öncelikli bir kuyruğu) kullanır. Her görev tamamlandıktan ve bir sonraki görev alınmadan önce, bekleyen tüm mikro görevler tamamlanır. Mikro görevler her zaman bir sonraki makro görevden önce çalışır.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

Olay Döngüsü İş Başında

Olay döngüsü algoritması: 1) Mevcut görevi, çağrı yığını boşalana kadar yürütün. 2) Mikro görev kuyruğunun tamamını boşaltın. 3) İsteğe bağlı olarak görüntüleme işlemini gerçekleştirin. 4) Bir sonraki makro görevi seçin ve tekrarlayın.

queueMicrotask()

queueMicrotask(fn), Promise oluşturmadan mikro görev kuyruğuna bir geri çağırma işlevi ekler. Doğrudan kullanılması nadirdir, ancak kitaplıkların zamanlamayı nasıl uyguladığını anlamak için yararlıdır.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Uzun Görevler Kullanıcı Arayüzünü Neden Dondurur

Eşzamanlı bir görev çok uzun sürerse (büyük miktarda veriyi işleyen sıkı bir döngü gibi), olay döngüsü kullanıcı arayüzü olaylarını veya görüntüleme işlemlerini işleyemez. Bu durum sayfayı dondurur. Olay döngüsüne yeniden zaman vermek için uzun işlemleri setTimeout ile parçalara bölün.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Web Çalışanları — Gerçek Paralellik

CPU yoğun işlemler için kendi olay döngüsüne sahip ayrı bir iş parçacığı olan bir Web çalışanı kullanın. Çalışanlar ana iş parçığıyla postMessage aracılığıyla iletişim kurar. Paylaşılan bellek yoktur, yarış durumu yoktur.

requestAnimationFrame

requestAnimationFrame(callback), bir sonraki tarayıcı yeniden çiziminden önce çalıştırılmak üzere bir geri çağırma işlevi planlar. JavaScript ile gerçekleştirilen animasyonlar için kullanın; görüntü yenileme hızıyla eşzamanlanır (genellikle saniyede 60 kare).

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Olay Döngüsünü Görselleştirme

latentflip.com/loupe adresindeki etkileşimli tanıtım, kodu yapıştırıp çağrı yığınını, Web API'yi, görev kuyruğunu ve olay döngüsünü ağır çekimde izlemenizi sağlar. Sezgisel bir anlayış geliştirmek için vazgeçilmezdir.

Kısa Kontrol

Bir Promise resolve edildikten sonra .then() geri çağırma işlevi hangi kuyrukta çalışır?

Özet: Olay Döngüsü

JavaScript tek iş parçacıklıdır. Asenkron işlemler Web API'lerine gönderilir. Geri çağırma işlevleri görev kuyruğu (setTimeout, fetch geri çağırma işlevleri) veya mikro görev kuyruğu (Promise'ler) aracılığıyla geri döner. Olay döngüsü, bir sonraki görüntüleme işleminden veya makro görevden önce her görevden sonra mikro görevleri tamamen boşaltır. Uzun süren eşzamanlı kod her şeyi engeller.

Sıkça Sorulan Sorular

“Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler” dersi ücretsiz mi?

Evet — “Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler” dersinde ne öğreneceğim?

JavaScript'in nasıl çalıştığını görselleştirin: çağrı yığını, görev kuyruğu, Promise'lerden gelen mikro görevler ve eşzamansız işlemler sırasında kullanıcı arayüzünün neden hiç engellenmediği. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Olay Döngüsü: Çağrı Yığını Kuyruğu Mikro Görevler
Geri Çağrılar ve Geri Çağrı Cehennemi
Promise'ler: then catch finally Promise.all
async/await ve Hata Yönetimi

← Frontend Academy Sayfasına Dön