JavaScript — Callback гэж юу вэ?

Зургийг Khandgaicomic -с зөвшөөрөлгүй — уучлааарай :)) https://www.facebook.com/pg/KhandgaiComic

Callback гэж юу вэ?

Энгийнээр: монголоор бол call — дуудах back — ар тал, хойно тэгэхээр хойноос дуудах гэж болох юм.Нэгэнт л callback нь хойноос дуудах гэсэн утгатай болохоор Callback бол өөр нэг функц ажиллаж дууссаны дараа ажилладаг функц юм.

Илүү нарийнаар: JavaScript д функцүүд нь объект байдаг. Ийм учраас функцүүд нь өөр функцийг аргументээр авч болдог мөн өөр функцээс буцааж болдог. Энэ төрлийн функцийг higher-order functions гэнэ. Функц Аргументээр дамжиж л байгаа бол түүнийг callback функц гэж болно.

— За одоо жишээ дээр авч үзэцгээе

Яагаад бидэнд CallBack функц хэрэгтэй вэ?

Хамгийн гол шалтгаан бол JavaScript нь үзэгдлээр удирдагдах хэл( event driven language) юм. Энэ нь цааш явахаасаа өмнө хариуг хүлээхийн оронд JavaScript нь хариу хүлээж байхдаа дараагийн кодыг ажиллуулаад байдаг гэсэн үг юм. Жишээ авч үзье

function neg(){
  console.log(1);
}
function hoyor(){
  console.log(2);
} 
neg();
hoyor();

харж байгаачлан neg түрүүлж ажиллана, дараа нь hoyor функц ажиллана. — Консол дээр лог хийхэд хариу

//1
//2

яг л бидний бодсон шиг байлаа.

Харин хэрвээ neg функц нь нэг төрлийн шууд ажиллаж чадахгүй код байвал яах вэ? Жишээ нь, API хүсэлт — бид хүсэлт илгээгээд буцаж ирэх хариуг хүлээх хэрэгтэй болдог. Харин дараах жишээн дээр энэ хүлээх үзэгдлийг бид setTimеout -г ашиглан хуурамчаар бий болгоно. setTimeout нь хэсэг хугацааны дараа функцийг дууддаг функц юм. Бид API хүсэлтийг дүрслэхийн тулд өөрсдийн функцээ 500миллсекунд хүлээлгэхэд бидний код ингэж харагдана.

function neg(){
  // функц хүлээлтийг үүсгэж байна
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function hoyor(){
  console.log(2);
}
neg();
hoyor();

setTimeout функц дотор функцийг буюу console.log(1); ээ 500 миллсекундын хүлээлгэнд оруулж байгаан энэ юм. За одоо функцүүдээ дуудаад үзвэл.

neg();
hoyor();
//2
//1

Хэдий бид neg() функцийг эхлээд дуудсан ч, тус функцийн хариу hoyor() фунцийн дараа гарч байна.

Энэ нь JavaScript бидний хүссэн дарааллаар функцийг дуудахгүй байгаад биш харин JavaScript нь hoyor()-г ажлуулахдаа өмнөх neg()-с ирэх хариуг хүлээхгүй байгаад байгаа юм.

Үүнийг харуулсан учир нь та нэг функцийг өөр нэг функцийн ард дуудаад түүнийгээ таны хүссэн дарааллаар ажиллана гэдэгт итгэх хэрэггүй гэдгийг хэлэх гэж оролдлоо. CallBack нь тодорхой кодыг бүрэн ажиллаж дуусхаас нааш хэсэг кодыг ажиллуулахгүй байх арга юм.

Callback үүсгэе

за, жишээ өөрсдийн callback функц үүсгэж үзэцгээе

Эхлээд, Chrome Developer Console (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J) оо нээгээд дараах функц зарлалтыг консолдоо бичээрэй.

function yoy(ner) {
  alert(`ёоё, ${ner},  газар хөдлөлт байсан л гэж найдъя.`);
}

Дээр бид yoy нэртэй функцийг үүсгэлээ. Энэ функц доторх алертийн текстийн гол дүрийн нэрийг хувьсагчаар авна. Тиймээ UB-Comedy :D. Дараах кодыг консол дээрээ бичээд функцээ дуудна.

yoy("ахаа");
//Alerts: ёоё, ахаа,  газар хөдлөлт байсан л гэж найдъя

За одоо өөрсдийн callback аа нэмцгээе. yoy() функцийн хамгийн сүүлийн аргументээр callback аа дамжуулъя. Ингэснээр бидний callback маань yoy() функцийн хоёр дахь аргументээр тодорхойлогдоно.

function yoy(ner,callback) {
  alert(`ёоё, ${ner},  газар хөдлөлт байсан л гэж найдъя.`);
  callback();
}
yoy("ахаа", function(){
  alert('Би ганцаараа байсандаа');
});

Дээрх кодыг консол дээрээ ажиллуулбал та ар араасаа гарч ирэх хоёр alert-г харах болно. Эхлээд “ёоё” тай alert үүний араас “би ганцаараа байсандаа” alert гарч ирнэ.

Гэхдээ бас callback функц нь заавал функц дуудах үед тодорхойлогдох албагүй. Callback нь хаана ч тодорхойлогдож болно, бидний хувьд иймэрхүү байж болно

function yoy(ner,callback) {
  alert(`ёоё, ${ner},  газар хөдлөлт байсан л гэж найдъя.`);
  callback();
}
function bi(){
  alert('Би ганцаараа байсандаа');
}
yoy("ахаа",bi);

Энэ жишээний харуулах үр дүн нь яг өмнөхтэй адил зүгээр л зохион байгуулалт нь жоохон өөр. Таны харж байгаачлан бид bi() функцийн тодорхойлолтыг yoy() функцийг дуудахдаа аргумент байдлаар дамжуулж байна.

Бодит жишээ

Twitter API -г ашиглан хайлт хийхэд ашигласан жишээ. Ямар ч API-д хүсэлт гаргаад хариу өгөхийг хүлээх хэрэгтэй байдаг. Хүлээж ирсэн мэдээллийг аппдаа ашиглана. Энэ бол callback-г ашиглаж болох гоё жишээ юм. Хүсэлт нь ингэж харагдана.

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // энд гайхамшиг болно :)))
  } else {
    console.log(err);
  }
})

• T.get нь Twitter рүү get хүсэлт илгээж байна
• Энэ хүсэлтэд 3 параметр байна: `search/tweets`- хүсэлт илгээх зам, params — хайлтын параметрууд, үл мэдэгдэх функц (callback)

Энд callback ашиглах нь чухал учир нь бидний код цааш ажиллахаасаа өмнө серверээс хариу хүлээх хэрэгтэй. search/tweets рүү GET хүсэлтээр параметрүүдээ илгээсний дараа энэ API руу илгээсэн хүсэлт маань амжилттай болохыг мэдэхгүй тийм учраас хүлээх хэрэгтэй. Твиттер хариу өгвөл бидний бичвэл callback функц дуудагдана. Твиттер err (error) объект эсвэл response объектын аль нэгийг бидэнд илгээнэ. Бид callback функц дотроо if() нөхцөлийг ашиглаж хүсэлт амжилттай болсон эсэхийг тодорхойлоод, амжилттай бол шинэ өгөгдөл дээр ажиллана.

Ёо, дууссан л гэж найдъя

Тийм ээ, дуусаа. Та одоо callback гэж юу болох хэрхэн ажилладгийг ойлгож авсан гэж найдъя. Гэхдээ энэ нь ердөө л callback гэх уулын оройн хэсэг болно цаашид суралцах зүйл илүү олон байгаа амжилт :)

Холбоо барих

Цахим шуудан: y.usott@gmail.com

Youtube суваг: https://www.youtube.com/channel/UC_73ZL698ok-bpQIJed8O4Q