JavaScript event loop va navbat tizimi

Nega setTimeout(..., 0) darhol bajarilmaydi? Nega Promise setTimeout dan oldin chiqadi? Javob event loop da — JavaScript’ning ishlarni navbatga qo’yish tizimida.

JavaScript bir oqimli

JavaScript

console.log("Boshlandi");

const boshi = Date.now();
while (Date.now() - boshi < 300) {
// 300 ms davomida band
}

console.log("Tugadi:", Date.now() - boshi, "ms");

Unda setTimeout va fetch qanday “bir vaqtda” ishlaydi? Ularni JavaScript emas, brauzer bajaradi va tayyor bo’lganda callback’ni navbatga qo’yadi.

Call stack

JavaScript

function uchinchi() {
console.log("Zanjir:", new Error().stack.split("\n").length - 1, "daraja");
return 3;
}

function ikkinchi() {
return uchinchi();
}

function birinchi() {
return ikkinchi();
}

console.log(birinchi());

Call stack — bajarilayotgan funksiyalar to’plami. Har chaqiruv ustiga qo’shiladi, tugagach olinadi. Stack bo’shaguncha navbatdagi ish boshlanmaydi — bu asosiy qoida.

Ikki navbat

JavaScript

console.log("1 — sinxron");

setTimeout(() => console.log("4 — makrotask (setTimeout)"), 0);

Promise.resolve().then(() => console.log("3 — mikrotask (Promise)"));

console.log("2 — sinxron");

Tartib: sinxron kod → mikrotask → makrotask. setTimeout 0 ms bilan yozilsa ham oxirida chiqdi.

Tartibni to’liq ko’rish

JavaScript

console.log("1 — boshi");

setTimeout(() => console.log("6 — timeout 1"), 0);
setTimeout(() => console.log("7 — timeout 2"), 0);

Promise.resolve()
.then(() => console.log("3 — promise 1"))
.then(() => console.log("5 — promise 2 (ikkinchi bosqich)"));

queueMicrotask(() => console.log("4 — queueMicrotask"));

console.log("2 — oxiri");

Qoida: butun sinxron kod → barcha mikrotasklar → bitta makrotask → yana barcha mikrotasklar → keyingi makrotask.

Zanjirdagi ikkinchi then ga e’tibor bering: u queueMicrotask dan keyin chiqdi. Sababi — zanjirning har bo’g’ini o’zidan oldingisi tugagachgina navbatga qo’yiladi, queueMicrotask esa allaqachon navbatda turgan edi.

await ham mikrotask

JavaScript

async function ishla() {
console.log("2 — async boshi");
await null;
console.log("4 — await keyini");
}

console.log("1 — boshlandi");
ishla();
setTimeout(() => console.log("5 — timeout"), 0);
console.log("3 — tugadi");

async funksiya await gacha sinxron bajariladi. await dan keyingi qism esa mikrotask navbatiga tushadi — async/await Promise ustiga qurilgani shundan.

Mikrotask makrotaskni kutdirmaydi

JavaScript

setTimeout(() => console.log("Makrotask — oxirida"), 0);

Promise.resolve().then(() => {
console.log("Mikrotask 1");
return Promise.resolve();
}).then(() => {
console.log("Mikrotask 2");
}).then(() => {
console.log("Mikrotask 3");
});

console.log("Sinxron");

Uchta mikrotask ketma-ket bajarildi — makrotask ularning hammasini kutdi.

Cheksiz mikrotask sahifani muzlatadi

Mikrotask o’zini qayta navbatga qo’ysa, event loop makrotaskka hech qachon o’tolmaydi:

function cheksiz() {
  Promise.resolve().then(cheksiz);   // ❌ sahifa muzlaydi
}

setTimeout bilan yozilsa esa brauzer nafas oladi.

Amaliy oqibat — og’ir hisobni bo’lish

JavaScript

function ogir(n) {
let s = 0;
for (let i = 0; i < n; i++) s += i;
return s;
}

const boshi = Date.now();
console.log("Natija:", ogir(20000000));
console.log("Bloklandi:", Date.now() - boshi, "ms");
console.log("Shu vaqt davomida sahifa javob bermadi");

Bunday hisobni bo’laklarga ajratib, orasida brauzerga navbat berish kerak:

JavaScript

function bolaklab(jami, bolak, tugadi) {
let i = 0;
let s = 0;

function qadam() {
  const oxiri = Math.min(i + bolak, jami);
  for (; i < oxiri; i++) s += i;

  if (i < jami) {
    setTimeout(qadam, 0);
  } else {
    tugadi(s);
  }
}

qadam();
}

console.log("Boshlandi");

bolaklab(5000000, 500000, (natija) => {
console.log("Natija:", natija);
});

console.log("Bu darhol chiqdi — sahifa bloklanmadi");

Har bo’lak orasida setTimeout brauzerga hodisalarni qayta ishlash imkonini beradi. Haqiqiy loyihalarda og’ir hisob uchun Web Worker ishlatiladi — u alohida oqimda ishlaydi.

Xulosa jadvali

Navbat	Nimalar	Qachon
Sinxron kod	Oddiy qatorlar	Darhol, stack’da
Mikrotask	`then`, `catch`, `await`, `queueMicrotask`	Stack bo’shashi bilan, hammasi
Makrotask	`setTimeout`, `setInterval`, hodisalar	Mikrotasklardan keyin, bittasi

Amaliy mashq

console.log, setTimeout(0) va Promise.then ni aralashtirib yozing — tartibni oldindan ayting, keyin tekshiring;
async funksiyada await dan oldin va keyin log qo’ying;
uchta zanjirli then va bitta setTimeout yozib, tartibni kuzating;
while bilan 500 ms bloklovchi kod yozing;
og’ir hisobni setTimeout bilan bo’laklarga ajrating;
queueMicrotask va setTimeout ni solishtiring.

1-qadam — bu darsning asosiy sinovi.

Qisqacha xulosa

JavaScript bir oqimli: bir vaqtda bitta ish bajaradi.
Call stack bo’shamaguncha navbatdagi ish boshlanmaydi.
Mikrotask (Promise, await) makrotaskdan oldin bajariladi.
Har makrotaskdan keyin barcha mikrotasklar ishlaydi.
setTimeout(..., 0) “darhol” emas — “navbat kelganda” degani.
Og’ir sinxron kod sahifani muzlatadi — bo’laklang yoki Worker ishlating.

Keyingi darsda generator va iterator — qiymatlarni talab bo’yicha berish.