Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Callback funksiyalar

ULASHISH

"I will call back later!"

JavaScript Callbacks (Callback funksiyalari) - bu boshqa funksiyaga argument sifatida uzatiladigan funksiya, keyinchalik ma’lum bir vazifani bajarish uchun keyinroq bajariladi (yoki "qayta chaqiriladi").

Ushbu mexanizm JavaScript-ning hodisalarga asoslangan va asinxron dasturlash modeli uchun asosiy hisoblanadi.

Callback funksiya nima?

Callback funksiya — boshqa funksiyaga argument sifatida uzatilgan funksiya.

Callback funksiya keyinroq bajarilishi uchun mo‘ljallangan.

Keyinchalik, odatda, ma’lum bir voqea sodir bo‘lganda yoki asinxron operatsiya tugallanadi.

"Callback" nomi inglizcha "call back" (qayta chaqirish) ma’nosidan kelib chiqadi — bir funksiya o‘z ishini tugatgach, ikkinchisini chaqiradi.

Callback turlari

  • Asinxron callback’lar

    Asinxron Callback-lar keyinroq amalga oshiriladi, bu esa asosiy dasturni kutmasdan ishlashni davom ettirishga imkon beradi.

    Bu tarmoq so‘rovlari kabi uzoq davom etadigan vazifalarni bajarayotganda ilovaning muzlashini oldini olish uchun zarur.

  • Sinxron callback’lar

    Sinxron callback’lar tashqi funksiya ichida darhol bajariladi va tugaguncha keyingi amallarni bloklaydi.

    Map(), filter() va forEach() kabi Array usullari sinxron Callback-lardan foydalanadi.

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 hal qilish 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.

Funksiyani argument sifatida topshirganingizda, qavsni ishlatmaslikni unutmang.

Right: displayDate

Wrong: displayDate()

Asinxron amallar

setTimeout() kabi window funksiyalari belgilangan kechikishdan keyin kodni bajarish uchun callback’lardan foydalanadi.

Misol

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

O‘zingiz sinab ko‘ring »

Yuqoridagi misolda myFunction — setTimeout() ga argument sifatida uzatilgan callback funksiyasi.

3000 - oldingi millisekundlar soni myFunction chaqiriladi.

Array usullari

map(), filter() va forEach() kabi ko‘plab o‘rnatilgan massiv metodlari har bir elementda bajariladigan amalni belgilash uchun callback funksiyalarni qabul qiladi.

forEach() metodi massivning har bir elementi uchun funksiyani (callback funksiyani) bir marta chaqiradi.

Misol

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}
O‘zingiz sinab ko‘ring »

map() usuli har bir Array elementida funksiyani bajarish orqali yangi Array yaratadi.

Misol

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}
O‘zingiz sinab ko‘ring »

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);

O‘zingiz sinab ko‘ring »

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);

O‘zingiz sinab ko‘ring »

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 siz kalkulyator funksiyasini (myCalculator) callback (myCallback) bilan chaqirishingiz va hisoblash tugagandan so‘ng kalkulyator funksiyasiga callback-ni ishga tushirishga ruxsat 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’ning asosiy tushunchalari

  • Argument sifatida funksiya JavaScript-dagi funksiyalar boshqa har qanday o‘zgaruvchi yoki obyekt kabi ko‘rib chiqilishi mumkinligi sababli ularni boshqa funksiyalarga argument sifatida o‘tkazishingiz mumkin.

  • Kechiktirilgan bajarish

    callback-ning asosiy afzalligi shundaki, u kechiktirilgan bajarishga imkon beradi, ya’ni callback qilish funksiyasi darhol ishlamaydi.

    Buning o‘rniga, u ma’lum bir shart bajarilgandan so‘ng, voqea sodir bo‘lgandan keyin yoki asinxron operatsiya tugallangandan keyin ishlaydi.

    Bu mexanizm dastur uzoq davom etadigan vazifalar (masalan, serverdan ma’lumot olish, faylni o‘qish yoki foydalanuvchi bosishini kutish) tugashini kutayotganda boshqa kodni bajarishda davom eta olishini ta’minlaydi

    .
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish