JavaScript Olay Döngüsü — setTimeout(0) Neden Sonra Yazıyor?

Bir kafede tek bir aşçı var. Elindeki tabağı bitirmeden başka işe bakmıyor. Bitirince önce kapıya iliştirilmiş acil notlara, sonra sıradaki müşteriye geçiyor.

Tek aşçı, tek iş

JavaScript kodu tek bir çağrı yığını?Terimin tanımını açcall stackŞu an çalışan fonksiyonların üst üste dizildiği yığın. JavaScript'te tektir; yığın boşalmadan hiçbir callback çalışmaz.Sözlükte gör → üzerinde çalışır. Bir fonksiyon çalışırken başka hiçbir JavaScript kodu araya giremez.

Bir tıklama, bir zamanlayıcı ya da bir ağ cevabı geldiğinde, callback’i hemen çalışmaz. Bir kuyruğa girer ve yığının boşalmasını bekler.

İki ayrı kuyruk

then, await’ten sonraki satırlar ve queueMicrotask bir mikro görev?Terimin tanımını açmicrotaskPromise.then, await sonrası ve queueMicrotask işleri. Yığın her boşaldığında bu kuyruk tamamen boşaltılır; makro görevlerden önce gelir.Sözlükte gör → olur. Yığın her boşaldığında bu kuyruk tamamen boşaltılır.

setTimeout, tıklamalar ve ağ olayları ise bir makro görev?Terimin tanımını açmacrotasksetTimeout, setInterval, tıklama ve ağ olayları gibi görevler. Mikro kuyruk boşken turda yalnızca bir tanesi çalışır.Sözlükte gör → olur. Her turda yalnızca bir tanesi çalışır, o da mikro kuyruk boşken.

await fonksiyonu ikiye böler

async bir fonksiyon, ilk await’e kadar tıpkı normal bir fonksiyon gibi hemen çalışır. await’ten sonraki kısım ise bir mikro görev olarak sonraya kalır.

Bu yüzden await’ten sonra yazdığın satır, fonksiyonu çağıran koddaki sonraki satırdan sonra çalışır. Kod yukarıdan aşağı okunur ama aşağıdan yukarı gibi davranabilir.

Kendin gör

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

1. İlk programı adım adım oynat. B, setTimeout’a 0 verilmesine rağmen en sona kaldı.
2. “async fonksiyon ve await” seç. 2, 3’ten sonra yazdı: await fonksiyonu ikiye böldü.
3. “Zamanlayıcının içinde Promise” seç. T1’in içindeki P2, T2’den önce yazdı.
4. “Zincirlenen then” seç. Üç then’in hepsi zamanlayıcıdan önce bitti.

Tuzaklar

Bitmeyen mikro görevler. Kendini sürekli yeniden kuyruğa koyan bir then zinciri, makro görevlere ve ekranın yeniden çizilmesine hiç sıra bırakmaz. Sayfa donar.

Uzun senkron döngü. Yığını uzun süre meşgul eden bir döngü, tıklamaları da bekletir. Büyük işi parçalara bölmek ya da bir Web Worker’a vermek gerekir.

await’siz async çağrı. save() bir Promise döndürür. Başına await yazmazsan sonraki satır kayıt bitmeden çalışır.

Aşağıdaki örnek bir bankacılık uygulamasının hesap ekranından: işlem listesi yüklenirken ekranın donmaması ve sıranın bilinçli kurulması.

1
// Each step waits for the one before it; nothing runs out of order.
2
export async function loadStatement(api: StatementApi, accountId: string): Promise<Statement> {
3
  const account = await api.account(accountId);
4
  const lines = await api.lines(accountId, account.currentPeriod);
5
  return { account, lines };
6
}

1
// Building a 50 000-line CSV in one loop would hold the call stack and freeze
2
// the page. A macrotask between chunks lets clicks and painting through.
3
const yieldToBrowser = (): Promise<void> => new Promise((resolve) => setTimeout(resolve, 0));
4

5
export async function exportCsv(lines: readonly StatementLine[], chunk = 2_000): Promise<string> {
6
  const parts: string[] = [];
7
  for (let i = 0; i < lines.length; i += chunk) {
8
    parts.push(lines.slice(i, i + chunk).map(toCsvRow).join('\n'));
9
    await yieldToBrowser();    // a then() here would NOT help: microtasks run before painting
10
  }
11
  return parts.join('\n');
12
}

1
import { expect, it } from 'vitest';
2

3
it('runs sync code, then microtasks, then timers', async () => {
4
  const seen: string[] = [];
5
  seen.push('A');
6
  setTimeout(() => seen.push('B'), 0);
7
  Promise.resolve().then(() => seen.push('C'));
8
  seen.push('D');
9

10
  await new Promise((resolve) => setTimeout(resolve, 0));
11
  expect(seen).toEqual(['A', 'D', 'C', 'B']);
12
});

Kendini sına