Sinxron va Asinxron — farqi va nima uchun kerak
Muammodan boshlaylik
Siz veb ilova yozyapsiz. Tugma bosilganda server dan foydalanuvchi ma'lumotlari kelishi kerak. Server javob berguncha 2 soniya o'tadi.
Shu 2 soniyada sahifa bilan nima bo'lishi kerak? Ikki xil javob bor:
1-javob: Kutadi. 2 soniya hech narsa ishlamaydi — scroll qilib bo'lmaydi, boshqa tugma bosa olmaysiz. 2 soniyadan keyin ma'lumot keladi, sahifa jonlanadi.
2-javob: Kutmaydi. Server so'rovi yuborildi, lekin sahifa ishlashda davom etadi. Ma'lumot kelganida — o'sha joyga yoziladi.
Birinchisi — sinxron. Ikkinchisi — asinxron.
Sinxron — navbat bilan
Sinxron kodda har bir qator oldingi qator tugamaguncha boshlanmaydi. Qatma-qat, navbat bilan.
Hayotiy o'xshatma
Eski uslubdagi poliklinika. Bitta shifokor, bitta xona. Birinchi bemor kirdi — ikkinchi kutadi. Birinchi chiqmaguncha ikkinchi kira olmaydi. Birinchida tahlil uchun 40 daqiqa ketsa — hammasi 40 daqiqa kutadi.
Navbat — qat'iy. Hech kim o'tmaydi.
Sinxron kodda xuddi shunday: biror qator serverdan ma'lumot kutayotgan bo'lsa — keyingi hamma qator, hamma funksiya, butun sahifa o'sha kutish tugaguncha to'xtab turadi.
console.log("Boshlanish");
// Bu funksiya 3 soniya ishlaydi (soxta "server kutish"):
const boshi = Date.now();
while (Date.now() - boshi < 3000) {} // ← 3 soniya loop
console.log("Server javobi keldi");
console.log("Tugash");
Bu 3 soniyada brauzer hech narsa qila olmaydi. Sichqon bosishlar saqlanmaydi, animatsiyalar to'xtaydi, sahifa muzlaydi. Foydalanuvchi "ilova ishlamayapti" deb o'ylaydi.
Asinxron — kutmasdan davom etish
Asinxron kodda uzoq davom etadigan ish fonga yuboriladi. JavaScript keyingi qatorga o'tadi. Fon ishi tugagach — natija qaytadi.
Hayotiy o'xshatma
Zamonaviy poliklinika. Shifokor bemorni qabul qildi, tahlil uchun laboratoriyaga yo'naltirdi: "tahlil tayyor bo'lganda xabar bering". Bemor kutib o'tirmaydi — ketadi, boshqa ishlari bilan shug'ullanadi. Tahlil tayyor bo'lganda SMS keladi — bemor qaytib keladi.
Shifokor bu vaqtda boshqa bemorlarni qabul qildi. Hech kim befoyda kutib o'tirmadi.
console.log("Boshlanish");
// Server so'rovi fonga yuborildi — kutilmadi:
setTimeout(function() {
console.log("Server javobi keldi"); // ← 2 soniyadan keyin
}, 2000);
console.log("Tugash"); // ← server ni kutmadi, darhol chiqdi
// Natija:
// Boshlanish
// Tugash
// Server javobi keldi ← 2 soniyadan keyin
setTimeout — "bu ishni 2 soniyadan keyin qil, men davom etaman" deydi. JavaScript setTimeout ni qayd etadi va o'tib ketadi. 2 soniya o'tgach — ichidagi funksiya ishlaydi.
Nima uchun JavaScript sinxron bo'la olmaydi?
JavaScript bitta ip (thread) da ishlaydi. Bu shuni anglatadi: bir vaqtda faqat bitta ish bajariladi. Ikki ish parallel emas.
Hayotiy o'xshatma
Bir qo'lli oshpaz. Bir vaqtda faqat bitta idishni ushlay oladi. Lekin oshpaz aqlli — qozonni o'tga qo'ydi va u qaynayotgan paytda salatni qirib oldi. Qozon o'zi qaynayapti, oshpaz bo'sh vaqtni salatga sarfladi.
JavaScript ham xuddi shunday. Server javobini kutish vaqtida boshqa kodlarni bajaradi. "Kutish" — ya'ni tarmoq operatsiyasi — brauzer tomonidan boshqariladi, JavaScript ip band emas.
Sinxron (noto'g'ri tasavvur):
JavaScript ──→ server kutadi ──→ server kutadi ──→ javob ──→ davom etadi
[muzlagan] [muzlagan]
Asinxron (haqiqiy ish):
JavaScript ──→ "server, so'rovni ol" ──→ boshqa ishlar ──→ boshqa ishlar
↓ ↑
Brauzer tarmoqqa so'rov yubordi ──→ javob keldi ──┘
Qachon qaysi?
Asinxron kerak bo'lgan hollar:
- Serverdan ma'lumot olish (
fetch) - Faylni o'qish yoki yozish
- Kechikish bilan biror narsa qilish (
setTimeout) - Foydalanuvchi kiritishini kutish
Sinxron yetarli bo'lgan hollar:
- Oddiy hisoblashlar:
2 + 2, massivni saralash - DOM ni yangilash
- Ob'ekt yaratish
Qoida oddiy: ish "tashqaridan" keluvchi narsaga bog'liq bo'lsa — server, fayl, vaqt — asinxron bo'lishi kerak.
Asinxron yozishning uch usuli
JavaScript da asinxronlikni yozishning uch usuli bor. Har biri avvalgisining muammosini yechgan:
Callback — eng eski usul. Funksiya ichiga funksiya berish.
Promise — 2015 yilda qo'shildi. Callback muammolarini yechdi.
Async/Await — 2017 yilda. Promiseni yanada qulay yozishga imkon berdi.
Ular bir-birini almashtirmadi — hammasi hali ishlatiladi. Lekin yangi kod yozishda Async/Await afzal. Keyingi darslarda barchasini ko'ramiz.
Tez-tez uchraydigan xatolar
Asinxron natijasini darhol ishlatishga urinish:
Bu eng ko'p chiqadigan xato. Server dan ma'lumot so'raldi, lekin javob hali kelmagan. Shu paytda natijani ishlatmoqchi bo'lasiz:
let foydalanuvchi;
setTimeout(function() {
foydalanuvchi = { ism: "Jasur" }; // ← 1 soniyadan keyin o'rnatiladi
}, 1000);
console.log(foydalanuvchi.ism); // ❌ TypeError — foydalanuvchi hali undefined
Natija faqat asinxron ish tugagandan keyin ishlatilishi kerak. Bu — callback, Promise, yoki async/await ning vazifasi.
Xulosa
Sinxron — qatma-qat. Har bir qator oldingi tugamaguncha kutadi. Uzoq ish — butun sahifani to'xtatadi.
Asinxron — fonga yuborish. Uzoq ish kutilmaydi, keyingi qatorga o'tiladi. Ish tugaganda natija qaytadi.
JavaScript bitta ipda ishlaydi. Asinxronlik tufayli ip to'silmaydi — server kutilayotganda boshqa kodlar ishlashda davom etadi.
Keyingi dars
35-dars: Event Loop — Call Stack, Task Queue, Microtask Queue