setTimeout ve bir söz ile birkaç satır çalıştırın; çıktı sırası sizi şaşırtabilir. JavaScript olay döngüsü bunun nedenini açıklıyor. Tek iş parçacıklı bir dilin zamanlayıcıları, ağ çağrılarını ve tıklamaları donmadan yönetmesini sağlayan mekanizmadır.

Bunu bir kez anladığınızda, bir sürü kafa karıştırıcı hata anlamlı olmaya başlar. Her örneği Node.js 24’te çalıştırdık ve çıktı bu çalıştırmadan geliyor. Temel sıralama kuralları tarayıcılarda da geçerlidir ve Node.js’nin hangi noktalarda farklılaştığını belirtiriz. JavaScript vaatlerinin temellerini zaten biliyorsanız, bundan daha fazlasını elde edeceksiniz.

Olay döngüsü neden var?

JavaScript, kodunuzu tek bir ana iş parçacığında yürütür, böylece aynı anda yalnızca bir parçası çalışır. Eğer sadece bir ağ isteğini bekleseydi, yanıt geri gelene kadar sayfa donacaktı.

Yani JavaScript beklemez. Yavaş çalışma, ana bilgisayar ortamına, yani onu arka planda işleyebilen tarayıcıya veya Node.js’ye aktarılır. Bu iş bittiğinde kuyruğa bir geri arama yerleştirilir. Olay döngüsünün görevi, sıradaki geri aramaları boş olduğunda yığına taşımaktır.

Tek başına çalışan bir şef düşünün. Şef fırına bir tabak koyar ve ona bakmak yerine bir zamanlayıcı ayarlar. Zamanlayıcı çaldığında görev bir listeye eklenir ve şef, elindeki işi bitirdikten sonra görevi alır.

Hareketli parçalar

Görevlere bazen makro görevler denir. Kesin olarak konuşursak, birkaç görev kaynağı olabilir ve kesin ayrıntılar ortamlar arasında farklılık gösterir.

kurallar

1. Çağrı yığını boşalana kadar tüm eşzamanlı kodları çalıştırın.
2. Yol boyunca eklenen yeniler de dahil olmak üzere tüm mikro görevleri çalıştırın.
3. Bir tarayıcıda, zamanı gelmişse bir güncelleme oluşturun.
4. Sıradan bir görevi alın ve çalıştırın.
5. 2. adıma geri dönün.

En önemli ayrıntı: tüm mikro görevler, ardından bir görev. Çoğu olay döngüsü bulmacası bu tek kuralın uygulanmasıyla çözülür.

Siparişi görün

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

İşte olanlar. İki console.log hattı eşzamanlıdır, dolayısıyla ilk önce onlar çalıştırılır. Söz geri araması ve queueMicrotask mikro görev kuyruğuna girdi ve yığın boşalır boşalmaz eklendikleri sıraya göre çalıştırıldılar. Zamanlayıcı geri araması, gecikmesi sıfır olmasına rağmen bir görev sırasını beklemek zorundaydı.

Mikro görevler zamanlayıcılar arasında çalışır

Her görevden sonra mikro görev kuyruğu yeniden boşaltılır. Bu örnek bunu kanıtlıyor:

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

İlk zamanlayıcı sırasında oluşturulan söz, ikinci zamanlayıcıdan önce yürütüldü. Modern tarayıcılar ve Node.js 11 ve sonraki sürümleri bu şekilde davranır.

Beklemenin uygun olduğu yer

await bir fonksiyonu ikiye böler. Ondan önceki her şey eşzamanlı olarak çalışır ve ondan sonraki her şey bir mikro görev olarak planlanır. Bu birçok insanı şaşırtıyor:

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

Arka planda bir async işlevi başlamaz. İlk await noktasına ulaşana kadar aynı iş parçacığı üzerinde çalışır. Bu, null gibi gerçek bir vaat olmayan bir şeyi beklerken bile geçerlidir. Bu söz dizimi hakkında daha fazla bilgi için JavaScript eşzamansız/beklemede kılavuzumuza bakın.

Döngüyü engelleme

Senkron kod çalışırken başka hiçbir şey yapamaz. Bunu göstermek için 0 ms’ye bir zamanlayıcı ayarladık, ardından ipliği yarım saniye meşgul tuttuk:

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

Zamanlayıcının gecikmesi minimumdur, bir garanti değildir. Yalnızca yığın serbest kaldığında çalışıyordu. Bir web sayfasında bunun gibi uzun bir döngü, tıklamaların yanıt vermediği ve animasyonların durduğu anlamına gelir. Bir sunucuda diğer tüm isteklerin beklemesi gerekir; bu nedenle yavaş bir eşzamanlı çağrı, Node.js işleminin tüm kullanıcılarına zarar verebilir.

Engellemenin yaygın nedenleri arasında büyük döngüler, çok büyük JSON’un ayrıştırılması, istek işleyicilerdeki readFileSync gibi eşzamanlı dosya işlevleri ve yıkıcı düzenli ifadeler yer alır.

Duyarlı kalmak

Ağır işler için olay döngüsüne nefes alma şansı verin. Bunun bir yolu zamanlayıcıyı ara sıra duraklatmak ve böylece diğer görevlerin yürütülmesini sağlamaktır:

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

Diğer zamanlayıcı ortada çalışıyordu çünkü gerçek bir görevle teslim olmuştuk. Gerçek kod her bir öğeyi veya milisaniyede bir üretecektir. Görüntü işleme gibi gerçekten CPU ağırlıklı işler için, tarayıcılarda bir Web Çalışanı veya Node.js’de ayrı iş parçacıklarında çalışan bir çalışan iş parçacığı kullanın.

Mikro görev açlığı

Döngü, devam etmeden önce mikro görev kuyruğunu tamamen boşalttığından, daha fazla zamanlamayı sürdüren bir mikro görev, diğer her şeyi durdurabilir. Bunu 100.000 zincirleme mikro görevle test ettik:

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

Zamanlayıcı, hepsi tamamlanana kadar çalıştırılamadı. Bu zincir hiç sona ermezse, zamanlayıcılar asla çalışmaz ve tarayıcıda sayfa asla yeniden boyanmaz. await ile çözülmüş bir söze boyun eğmenin burada yardımcı olmadığını unutmayın, çünkü bu sadece başka bir mikro görev ekler. Başkalarına sıra vermek için zamanlayıcı gibi gerçek bir göreve ihtiyacınız var.

Tarayıcılarda oluşturma

Bir tarayıcı genellikle görevler arasında resim yapma şansını yakalar. Bu, yaygın bir hatayı açıklıyor:

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

Tarayıcının bu satırlar arasında görüntü oluşturma fırsatı olmadığından döndürücü hiçbir zaman görünmez. Bunu düzeltmek için, ağır iş başlamadan önce bir çerçevenin geçmesine izin verin veya bu işi bir işçiye aktarın. Görselleri değiştiren kod için requestAnimationFrame bir sonraki boyamadan hemen önce çalışır, bu da onu animasyon için doğru araç yapar.

Node.js farklılıkları

Node.js’nin zamanlayıcılar, G/Ç yoklaması ve setImmediate dahil olmak üzere çeşitli aşamalardan oluşan kendi olay döngüsü vardır. Ayrıca kendi kuyruğunda çalışan process.nextTick vardır. Bunları bir eşzamansız işlevin içinden çalıştırırken gördüklerimiz:

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

Birçok makale, nextTick‘in her zaman vaatlerden üstün olduğunu ve zamanlayıcının setImmediate‘den üstün olduğunu belirtir. Sonucumuz işin bu kadar basit olmadığını gösteriyor. Kodumuz zaten bir mikro görev içinde çalışıyordu, bu nedenle önce söz kuyruğu devam etti. Ve setTimeout ve setImmediate‘ün sırasının nereden çağrıldıklarına bağlı olarak değiştiği bilinmektedir. O yüzden bunların tam sırasına göre kod yazmayın. Bir şeyin birbiri ardına olması gerekiyorsa, bunları açıkça zincirleyin.

Röportaj sınavı

Cevabı okumadan önce sırayı bulmaya çalışın:

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

Çalışmamız a, f, c, e, b, d yazdırdı. İşte nedeni:

1. a ve f eşzamanlıdır, dolayısıyla önce onlar çalışır.
2. Yığın boş olduğundan mikro görevler şu şekilde çalışır: c, ardından aynı turda yeni mikro görev e.
3. Şimdi bir görev var: ilk sıraya alınan zamanlayıcı b.
4. Sonra bir sonraki görev: mikro görev sırasında kuyruğa alınan zamanlayıcı d.

Yaygın hatalar

• setTimeout‘nin kesin olduğunu düşünüyorum. Gecikme yalnızca minimum düzeydedir.
• async‘nin başka bir iş parçacığı anlamına geldiğini düşünmek. Asenkron kod, beklemeler arasında ana iş parçacığında hâlâ çalışıyor.
• Sırayı düzeltmek için uykuları kullanmak. Gerçek durumu beklemek çok daha güvenilirdir; bu aynı zamanda kesintili testler için de geçerlidir.
• forEach‘yi await ile kullanma Öğeler arasında beklemez. Bkz. JavaScript dizi yöntemleri.
• Bir sunucu işleyicisinde yoğun eşzamanlı çalışma yapmak. Bir istek diğer tüm istekleri geciktirebilir.

Son sözler

Temel kuralı unutmayın: yığın boşalana kadar çalıştırın, tüm mikro görevleri çalıştırın, ardından bir görevi çalıştırın ve tekrarlayın. Geri kalan her şey ondan kaynaklanır. Kalıcı olmasını sağlamak için yukarıdaki testin kendi versiyonunu yazın, çıktıyı kağıt üzerinde tahmin edin ve ardından çalıştırın. Bir yanlışı anlamak ve nedenini anlamak size herhangi bir diyagramdan daha fazlasını öğretecektir.

Sık sorulan sorular

Öğrenmeye devam et