Asinxron callback’lar
"I will call back later!"
Callback - bu boshqa funksiyaga argument sifatida uzatiladigan funksiya.
Qabul qiluvchi funksiya callback-ni qachon ishlatishni (chaqirishni) hal qiladi.
callback-ni darhol, keyinroq, bir marta yoki ko‘p marta chaqirish mumkin.
O‘z-o‘zidan, Callback-lar sinxron yoki asinxron emas.
Ular bitta funksiyaga boshqa funksiyani bajarishga ruxsat berishning oddiy usuli.
Nega callback’lardan foydalanish kerak?
Callback’lar funksiyalarni moslashuvchanroq qiladi.
Keyin nima bo‘lishini kod ichida qat’iy belgilab qo‘yish o‘rniga, funksiya callback uzatish orqali qarorni chaqiruvchi tomonga qoldiradi.
Misol
Funksiyani argument sifatida uzatish:
// A Greet Function
function greet(name, callback) {
callback("Hello " + name);
}
// A Display Function
function display(message) {
document.getElementById("demo").innerHTML = message;
}
// Call greet() with a callback function (display)
greet("John", display);
O‘zingiz sinab ko‘ring »
display funksiyasi callbackdir.
greet() funksiyasi uni qachon chaqirishni hal qiladi.
Sinxron callback’lar
Most callbacks execute immediately.
Ular sinxron Callback-lar deb ataladi, chunki ular joriy funksiya qaytishidan oldin ishlaydi.
Misol
// Calculate Function
function calculate(x, y, operation) {
return operation(x, y);
}
// Add Function
function add(a, b) {
return a + b;
}
// Call calculate() with add as callback
let result = calculate(5, 3, add);
O‘zingiz sinab ko‘ring »
Eslatma
Callback calculate() bajarilayotgan paytda darhol ishga tushadi.
Bu yerda hech qanday asinxron xatti-harakat yo‘q.
O‘rnatilgan sinxron callback’lar
Ko‘plab JavaScript metodlari sinxron callback’lardan foydalanadi.
| Metod | Callback Called | Asynchronous? |
|---|---|---|
forEach() |
Har bir element uchun bir marta | Yo‘q |
map() |
Har bir element uchun bir marta | Yo‘q |
filter() |
Har bir element uchun bir marta | Yo‘q |
reduce() |
Har bir element uchun | Yo‘q |
sort() |
Qiymatlarni solishtirish uchun | Yo‘q |
Vaqt bilan bog‘liq muammolar
Hisoblashdan oldin natijani ko‘ra olmaysiz.
Misol
let result;
setTimeout(function() {
result = 5;
}, 1000);
// What is result here?
O‘zingiz sinab ko‘ring »
Natija undefined, chunki asinxron kod hali tugamagan.
Callback g‘oyasi
Yuqoridagi muammoning yechimi — JavaScript-ga natija tayyor bo‘lgandan keyin chaqiriladigan callback funksiyasini berishdir.
Callback - bu boshqa funksiyaga argument sifatida uzatiladigan funksiya.
Ushbu texnika funksiyaga boshqa funksiyani chaqirishga imkon beradi.
Misol
function done(value) {
myDisplayer(value);
}
setTimeout(function() {
done(5);
}, 1000);
// What is result here?
O‘zingiz sinab ko‘ring »
Qiymat callback ichida ishlatiladi.
Bu ishlaydi, chunki callback keyinroq ishga tushadi.
Asinxron callback’lar
Callback’lar asinxron API’lar bilan ham keng qo‘llaniladi.
Bunday hollarda callback qilish asinxron operatsiya tugagandan so‘ng amalga oshiriladi.
Callback operatsiyani asinxron qiladigan narsa emas.
Asinxron API qachon callback qilishni hal qiladi.
Misol
// Set a Timeout
setTimeout(function () {myDisplayer("Finished!")}, 3000);
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda:
myDisplayer — setTimeout()’ga argument sifatida uzatilgan callback funksiya.
3000 - myDisplayer chaqirilishidan oldingi millisekundlar soni.
Brauzer callback’ni chaqirishdan oldin uch soniya kutadi.
Kechikishni callback’ning o‘zi emas, setTimeout() yaratadi.
Eslatma
Funksiyani argument sifatida topshirganingizda, qavsni ishlatmaslikni unutmang.
Right: setTimeout(myFunction, 3000)
Wrong: setTimeout(myFunction(), 3000)
Hodisalarni qayta ishlash
Callback-lar ko‘pincha JavaScript-da, ayniqsa voqealarni qayta ishlashda qo‘llaniladi:
Tugmalarni bosish yoki tugmalarni bosish kabi foydalanuvchi o‘zaro ta’sirini voqea tinglovchisiga callback funksiyasini taqdim etish orqali boshqarish mumkin.
Misol
document.getElementById("myButton").addEventListener("click", displayDate);
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda displayDate — addEventListener() metodiga argument sifatida uzatilgan callback funksiyasi.
Foydalanuvchi id="myButton" tugmachasini bosganida displayDate chaqiriladi.
Ketma-ketlikni boshqarish
Ba’zan siz funksiyani qachon bajarishni yaxshiroq nazorat qilishni xohlaysiz.
Aytaylik, siz hisob-kitob qilishni xohlaysiz va natijani ko‘rsatasiz.
Siz avval kalkulyator funksiyasini myCalculator, so‘ngra displey funksiyasini myDisplayer deb chaqirishingiz mumkin:
Misol
// Funtion to display something
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
// Function to calculate a sum
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
// Call the calculator
let result = myCalculator(5, 5);
// Call the displayer
myDisplayer(result);
Yoki siz kalkulyator funksiyasini chaqirishingiz mumkin myCalculator ,
va kalkulyator funksiyasi displey funksiyasini chaqirsin myDisplayer :
Misol
// Funtion to display something
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
// Function to calculate a sum
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
// Call the calculator
myCalculator(5, 5);
Yuqoridagi birinchi misol bilan bog‘liq muammo shundaki, natijani ko‘rsatish uchun ikkita funksiyani chaqirishingiz kerak.
Ikkinchi misoldagi muammo shundaki, siz kalkulyator funksiyasini natijani ko‘rsatishiga to‘sqinlik qila olmaysiz.
Endi callback qilish vaqti keldi.
Callback yordamida kalkulyator funksiyasini (myCalculator) callback (myCallback) bilan chaqirishingiz va hisoblash tugagandan so‘ng callback-ni kalkulyator funksiyasining o‘zi ishga tushirishiga imkon berishingiz mumkin:
Misol (callback’lar)
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda myDisplayer callback funksiyasi sifatida ishlatiladi.
U myCalculator() ga argument sifatida uzatiladi.
Callback zanjirlari
Ba’zan bir callback boshqa callback-ni ishlatadigan boshqa operatsiyani boshlaydi.
Bu chuqur o‘rnatilgan, murakkab va o‘qish qiyin bo‘lgan kodga olib kelishi mumkin.
Callback-lar chuqurlashganda, nosozliklarni tuzatish qiyin. Mantiq chapdan o‘ngga siljiydi va unga amal qilish qiyin bo‘ladi.
Bu ko‘pincha "callback hell (qayta qo‘ng‘iroqlar girdobi)" yoki "qiyomat piramidasi" deb ataladi.
Misol
step1(function(result1) {
step2(result1, function(result2) {
step3(result2, function(result3) {
display(result3);
});
});
});
Eslatma
Asinxron kodni o‘qish va saqlashni osonlashtirish uchun Promiselar va async/await kiritildi.
Xulosa
- Callback — boshqa funksiyaga uzatilgan funksiya.
- Callback’lar sinxron yoki asinxron bo‘lishi mumkin.
- callback-ning o‘zi kodni asinxron qilmaydi.
- Ko‘plab JavaScript metodlari sinxron callback’lardan foydalanadi.
- Asinxron API’lar natijalarni qayta ishlash uchun ko‘pincha callback’lardan foydalanadi.
- Promiselar va
async/awaitasinxron kodni yozishni osonlashtirgan holda bir xil g‘oyaga asoslanadi.
Callback asinxron emas
- Callback — shunchaki funksiya.
- U darhol chaqirilishi mumkin (map() yoki sort() kabi).
- U keyinroq asinxron API tomonidan chaqirilishi mumkin (setTimeout() yoki fetch() kabi).
- API (callback emas) asinxron xatti-harakatni keltirib chiqaradigan narsadir.
Callback’larga muqobillar
Asinxron callback qilish echimlarini yozish qiyin va debug qiyin.
Shu sababli, zamonaviy asinxron JavaScript Callback-lardan foydalanmaydi.
Zamonaviy JavaScript asinxron operatsiyalarni boshqarish uchun Promises va async/await sintaksisidan foydalangan holda yuqori alternativalarni taklif etadi, bu esa toza oqim va xatolarni yaxshiroq boshqarish imkonini beradi.
Callback’dan qachon foydalanish kerak?
Callback’larni tushunish hanuz muhim.
Callback’lar ayniqsa asinxron funksiyalarda, ya’ni bir funksiya boshqasini kutishi kerak bo‘lgan holatlarda (masalan, fayl yuklanishini kutishda) o‘zini yaxshi ko‘rsatadi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!