Hodisalar sikli
JavaScript bir vaqtning o‘zida faqat bitta kod qismini bajarishi mumkin.
JavaScript band bo‘lganda boshqa JavaScript kodi kutishi kerak.
JavaScript taymerlar, foydalanuvchi bosishlari, yuklab olishlar va asinxron operatsiyalarni qanday boshqaradi?
Javob - Voqealar sikli.
Hodisalar siklini (Event Loop) tushunish
Event Loop’ni tushunish JavaScript’ning ko‘plab odatiy xatti-harakatlarini tushuntirib beradi.
- Why
setTimeout(..., 0)does not execute immediately. - Nega uzun sikllar sahifani qotirib qo‘yadi.
- Why Promises execute before timers.
- Nega
awaitbrauzerni bloklamaydi. - Nega bosish hodisalari joriy kod tugashini kutadi.
JavaScript bir vaqtda bitta vazifani bajaradi
JavaScript kodni ketma-ket bajaradi.
Har qanday vaqtda faqat bitta funksiya bajarilishi mumkin.
Funksiyalar chaqirilgan tartibda bajariladi.
Har bir funksiya keyingisi boshlanishidan oldin tugashi kerak.
Misollar
function step1() {
myDisplayer("Step 1");
}
function step2() {
myDisplayer("Step 2");
}
step1();
step2();
Natija:
Step 1
Step 2
function step1() {
myDisplayer("Step 1");
}
function step2() {
myDisplayer("Step 2");
}
step2();
step1();
Natija:
Step 2
Step 1
Brauzer asinxron ishni bajaradi
JavaScript-ning o‘zi taymerlarni yoki veb-sahifalarni yuklab olishni kutmaydi.
Buning o‘rniga, JavaScript ishlashda davom etayotganda bu amallarni brauzer bajaradi.
Examples include:
- Timers
- Network requests
- User events
- File loading
Amaliyot tugagach, JavaScript natija tayyorligi haqida xabar oladi.
Hodisalar sikli (Event Loop)
Event Loop JavaScript band yoki band emasligini doimiy tekshirib turadi.
JavaScript joriy vazifasini tugatgandan so‘ng, Event Loop keyingi kutish vazifasini boshlaydi.
Ushbu jarayon sahifa ochiq bo‘lgunga qadar takrorlanadi.
JavaScript starts
↓
Run code
↓
Start timer
↓
Continue running
↓
Timer finishes
↓
Event Loop
↓
Run callback
Misol: setTimeout()
Callback darhol amalga oshirilmaydi.
Buning o‘rniga, u JavaScript joriy ishini tugatguncha kutadi.
Misol
myDisplayer("A");
setTimeout(function() {
myDisplayer("B");
}, 2000);
myDisplayer("C");
Natija:
A
C
B
Taymer deyarli darhol tugaydi.
Biroq JavaScript joriy kodni bajarib bo‘lmaguncha callback ishga tusha olmaydi.
Voqealar sikli joriy vazifa bajarilgandan so‘ng callback qilishni boshlaydi.
Misol: Promise
Misol
myDisplayer("A");
Promise.resolve().then(function() {
myDisplayer("B");
});
myDisplayer("C");
Natija:
A
C
B
Nega Promise callback’i taymerdan oldin ishga tushdi?
Javob: Promise qilingan Callback-lar ustuvorligi yuqori bo‘lgan maxsus navbatga joylashtiriladi.
Vazifalar navbati va mikrovazifalar navbati
JavaScript asinxron ish uchun ikkita asosiy navbatdan foydalanadi.
| Queue | Contains |
|---|---|
| Task Queue | Timers, events, messages |
| Microtask Queue | Promise ishlovchilari va await |
Har bir vazifa tugagandan so‘ng, JavaScript keyingi vazifani boshlashdan oldin barcha kutilayotgan mikrovazifalarni qayta ishlaydi.
Taymerlar va Promise’larni solishtirish
| Operatsiya | Queue |
|---|---|
| setTimeout() | Task Queue |
| setInterval() | Task Queue |
| Click event | Task Queue |
| Promise.then() | Microtask Queue |
| catch() | Microtask Queue |
| finally() | Microtask Queue |
| await continuation | Microtask Queue |
Uzoq vazifalar JavaScript’ni bloklaydi
Agar JavaScript uzoq davom etadigan vazifani bajarsa, qolgan hamma narsa kutishi kerak.
Bu vaqt ichida brauzer boshqa JavaScript kodini bajara olmaydi.
Foydalanuvchi bosishlari, taymerlar va tugallangan yuklab olishlar joriy vazifa tugaguncha kutishi kerak.
Misol
wait() ishlayotgan vaqtda brauzer javob bermayapti.
function wait() {
let i = 4e9;
while (--i > 0);
}
myDisplayer("Start");
wait();
myDisplayer("Done");
Misol tahlili
Nega misol uzoq vaqt oldi?
Nima uchun "Boshlash" va "Bajarildi" bir vaqtning o‘zida ko‘rsatilgan?
Savollar to‘g‘ridan-to‘g‘ri brauzerlar sahifani qanday yangilashiga olib keladi.
Misol
Kod quyidagicha bajariladi:
myDisplayer("Start");
wait();
myDisplayer("Done");
1-qadam
Bu kod:
myDisplayer("Start");
DOM’ni o‘zgartiradi:
<p id="demo">Start</p>
Ammo brauzer darhol ekranni qayta bo‘yashmaydi.
2-qadam
starts the long loop.
wait();
Bu sikl ishlayotgan paytda:
- JavaScript band
- Event Loop ishlay olmaydi
- Brauzer sahifani qayta chiza olmaydi
Shunday qilib, DOM allaqachon "Start" ni o‘z ichiga olgan bo‘lsa ham, foydalanuvchi hali ham uni ko‘rmaydi.
3-qadam
Nihoyat sikl tugaydi.
myDisplayer("Done");
Endi DOM quyidagicha bo‘ladi:
<p id="demo">Start Done</p>
4-qadam
JavaScript vazifasi tugadi.
Faqat endi brauzer sahifani qayta bo‘yash imkoniyatiga ega bo‘ladi.
Shunday qilib, foydalanuvchi quyidagini ko‘radi:
Start Done
Diplayed both at once.
Vaqt shkalasi
JavaScript starts
↓
myDisplayer("Start")
(DOM changes)
↓
wait()
(JavaScript busy)
↓
myDisplayer("Done")
(DOM changes again)
↓
JavaScript finishes
↓
Browser repaints
↓
Screen shows:
Start Done
Yuqoridagi misol yaxshi Event Loop misolidir.
Bu ikkita alohida narsa borligini ko‘rsatadi:
- DOM’ni yangilash
- Ekranni yangilash (rendering)
DOM darhol yangilanadi, lekin qayta bo‘yashdan oldin brauzer joriy JavaScript vazifasi tugashini kutishi kerak.
Avval "Start" ko‘rsatilishini xohlaysizmi?
Misol
Uzoq vazifani bajarishdan oldin brauzerga qayta bo‘yash imkoniyatini berishingiz kerak:
function wait() {
let i = 4e9;
while (--i > 0);
}
myDisplayer("Start");
setTimeout(function () {
wait();
myDisplayer("Done");
}, 0);
Vaqt shkalasi
JavaScript starts
↓
Display "Start"
↓
Current task finishes
↓
Browser repaints
(Start becomes visible)
↓
Event Loop
↓
Run wait()
↓
Display "Done"
↓
Browser repaints
Xulosa
- JavaScript bir vaqtda bitta vazifani bajaradi.
- Brauzer taymerlar, yuklab olishlar va foydalanuvchi hodisalari kabi asinxron operatsiyalarni bajaradi.
- Tugallangan amallar JavaScript tayyor bo‘lguncha kutadi.
- Voqealar davri joriy vazifa tugagach, kutish vazifalarini boshlaydi.
- Promiselarni qayta ishlovchilar va
awaitdavomi taymerlardan oldin ishlaydi, chunki ular Microtask Queue-dan foydalanadilar.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!