Hodisalar tsikli: mikro va makrovazifalar

JavaScript'ning bajarilish tartibini tushunish uchun eng muhim tushuncha — hodisalar tsikli (event loop). U brauzer (yoki Node.js) kelib tushgan vazifalarni qanday navbatga qo'yishini, qaysi biri oldin bajarilishini va render qachon bo'lishini boshqaradi. Ushbu darsda makrovazifa va mikrovazifa navbatlarini, ularning tartibini va amaliy oqibatlarini chuqur ko'rib chiqamiz.

Hodisalar tsikli tushunchasi

JavaScript dvigateli (engine) juda oddiy tamoyil asosida ishlaydi: bajariladigan vazifa bo'lsa — bajaradi, bo'lmasa — kutadi. Bu cheksiz aylanuvchi algoritm quyidagicha ta'riflanadi:

1. Navbatdagi eng eski vazifa bor bo'lsa — uni to'liq bajaradi;
2. So'ng barcha to'plangan mikrovazifalarni bajaradi;
3. Kerak bo'lsa render qiladi (ekranni yangilaydi);
4. Vazifa yo'q bo'lsa — yangi vazifa kelguncha kutadi;
5. Yangi vazifa kelsa — 1-qadamdan boshlab qaytaradi.

Bu yerda kalit tushuncha shuki, JavaScript bir oqimli (single-threaded): bir vaqtning o'zida faqat bitta vazifa bajariladi. Vazifa boshlanganda, u tugamaguncha boshqa hech narsa (hatto foydalanuvchi bosishlari ham) qayta ishlanmaydi.

Makrovazifalar navbati

Makrovazifa (macrotask) — event loop bajaradigan asosiy, yirik vazifa. Makrovazifalarga quyidagilar kiradi:

• Skriptning o'zi (dastlabki kodni ishga tushirish);
• setTimeout va setInterval chaqiruvlari;
• Foydalanuvchi hodisalarini qayta ishlash (click, keydown va h.k.);
• Tarmoq so'rovi tugaganda ishlaydigan kod (masalan, hodisa sifatida).

Makrovazifalar navbatda (queue) turadi va event loop ularni birma-bir, kelgan tartibida bajaradi (FIFO — First In, First Out).

Mikrovazifalar navbati

Mikrovazifa (microtask) — asosan Promiselardan kelib chiqadigan mayda vazifa. Mikrovazifalar quyidagilar orqali hosil bo'ladi:

• .then, .catch, .finally ishlovchilari;
• async/await ichida awaitdan keyingi kod;
• queueMicrotask(fn) — mikrovazifani qo'lda navbatga qo'yish.

Eng muhim qoida: har bir makrovazifa tugagach, event loop navbatdagi keyingi makrovazifaga o'tishdan oldin BARCHA to'plangan mikrovazifalarni bajaradi. Agar mikrovazifalar ichida yana yangi mikrovazifalar paydo bo'lsa, ular ham darhol, shu yerda bajariladi.

Tartibga oid misol

Quyidagi kod nima chiqaradi? Bu klassik savol. Kodni o'ylab ko'ring:

console.log('1: skript boshi');

setTimeout(() => console.log('2: setTimeout'), 0);

Promise.resolve().then(() => console.log('3: promise'));

console.log('4: skript oxiri');

Natija tartibi:

1: skript boshi
4: skript oxiri
3: promise
2: setTimeout

Sababi:

1. '1' va '4' — bular joriy makrovazifa (skript) ichida sinxron bajariladi;
2. '3' (promise) — mikrovazifa. U skript tugagach, keyingi makrovazifadan oldin bajariladi;
3. '2' (setTimeout) — yangi makrovazifa, u navbatning oxirida, mikrovazifalardan keyin bajariladi.

Faqat sinxron tartibli playground misol

Quyidagi misolda hech qanday kechikish yo'q — barchasi sinxron, shu bois tartib aniq va tekshirsa bo'ladi. Bu event loop emas, balki oddiy chaqiruvlar steki (call stack) tartibi:

Chiqish: 1, 2, 3, 4 — chunki funksiya chaqiruvlari steki sinxron ishlaydi; hech narsa navbatga qo'yilmaydi.

queueMicrotask bilan tartib

Sof mikrovazifa tartibini queueMicrotask orqali ham ko'rsatish mumkin. Mikrovazifa hozirgi sinxron kod tugagach ishlaydi:

console.log('A: boshi');

queueMicrotask(() => console.log('C: mikrovazifa'));

console.log('B: oxiri');

// Chiqish: A, B, C

Ya'ni queueMicrotask kodni "joriy sinxron blok tugagandan keyin, lekin har qanday setTimeoutdan oldin" bajarilishga qo'yadi.

Render — ekran qachon yangilanadi

Brauzer ekranni har bir makrovazifadan keyin (va barcha mikrovazifalar tugagach) yangilashi mumkin. Lekin muhimi shundaki, render hech qachon vazifa o'rtasida bo'lmaydi. Agar vazifa uzoq davom etsa, uning ichida DOMni necha marta o'zgartirsangiz ham, foydalanuvchi faqat vazifa tugagach oxirgi holatni ko'radi.

// bu kod ekranda faqat oxirgi rangni ko'rsatadi
elem.style.color = 'red';
elem.style.color = 'green';
elem.style.color = 'blue';
// render faqat kod tugagach bo'ladi -> ko'k rang ko'rinadi

Og'ir hisob-kitobni bo'lish: setTimeout usuli

Faraz qilaylik, bizda juda katta hisob-kitob bor — u bir necha soniya davom etadi. Uni bitta makrovazifada bajarsak, brauzer shu vaqt davomida qotib qoladi. Yechim — ishni kichik bo'laklarga bo'lib, har bir bo'lakni setTimeout orqali alohida makrovazifada bajarish. Bu boshqa hodisalarga (bosishlar, render) "nafas olish" imkonini beradi:

let i = 0;
let natija = 0;

function hisobla() {
  do {
    i++;
    natija += i;
  } while (i % 1000000 !== 0); // har safar 1 mln qadam

  if (i < 1000000000) {
    setTimeout(hisobla, 0); // navbatning oxirida davom etamiz
  } else {
    console.log('Tayyor: ' + natija);
  }
}

hisobla();

Bu yerda har setTimeout(hisobla, 0) chaqiruvi orasida event loop boshqa makrovazifalarni (foydalanuvchi hodisalari, render) bajarishga ulguradi. Natijada brauzer "tirik" qoladi.

Og'ir hisob-kitob va mikrovazifa farqi

Muhim: og'ir ishni Promise.then yoki queueMicrotask orqali bo'lish foyda bermaydi. Chunki mikrovazifalar joriy makrovazifadan keyin, lekin render'dan oldin bajariladi. Agar siz ishni mikrovazifalar orqali bo'lsangiz, brauzer ular hammasi tugamaguncha renderga o'ta olmaydi — sahifa baribir qotib qoladi.

Amaliy foyda: progressni ko'rsatish

Ishni setTimeout bilan bo'lishning yana bir foydasi — jarayon davomida progressni yangilash. Har bir bo'lakdan keyin render bo'lgani uchun, foydalanuvchi "progress bar"ning harakatini real vaqtda ko'radi. Agar hammasi bitta makrovazifada bo'lganida, faqat oxirida to'satdan 100% ko'rinardi.

Xulosa

• Event loop — vazifalarni birma-bir bajaruvchi cheksiz tsikl; JavaScript bir oqimli;
• Makrovazifalar: skript, setTimeout/setInterval, hodisalar. Navbatda birma-bir bajariladi;
• Mikrovazifalar: Promise.then/catch/finally, awaitdan keyingi kod, queueMicrotask;
• Tartib: bitta makrovazifa → barcha mikrovazifalar → (render) → keyingi makrovazifa. Mikrovazifalar ustunlikka ega;
• setTimeout(fn, 0) — "darhol" emas, "navbatning oxirida keyingi makrovazifa sifatida" degani;
• Render vazifa o'rtasida bo'lmaydi — faqat vazifa tugagach ekran yangilanadi;
• Og'ir hisob-kitobni interfeysni bloklamasdan bajarish uchun uni setTimeout orqali makrovazifalarga bo'ling (mikrovazifalarga emas), yoki Web Worker'dan foydalaning.