آشنایی با callback function

مخلص کلام: callback function چیست؟

به زبان ساده: Callback یک فانکشن هست که بعد از اینکه یک فانکشن اجرا شد و به پایان رسید اجرا میشه به همین دلیل بهش Callback میگن.

یکم بپیچونیم حالا: تو جاوا اسکریپت، فانکشن ها از جنس آبجکت هستن. به همین دلیل فانکشن ها میتونن یک فانکشن دیگه رو به عنوان آرگومان دریافت کنند، و میتونند توسط فانکشن های دیگه بازگشت داده بشند. فانکشن هایی که اینکارو انجام میدن بهشون higher-order functions گفته میشه. هر فانکشنی که به عنوان آرگومان پاس داده میشن callback function میگیم بهشون.

اگه بخوایم راجبش صحبت کنیم مطالب زیادی هست ولی به همین اکتفا کنیم و چند تا مثال ببینیم.

چرا ما به Callback نیاز داریم؟

جاوا اسکریپت یک زبان رویداد محور(event driven) هست . این به معنیه که بجای اینکه منتظر پاسخ قبل از ادامه فرآیند بشه، جاوا اسکریپت اجرای فرآیند رو ادامه میده تا زمانی که به event بعدی برسه. بیاین یه مثال ساده رو باهم ببینیم:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

همونطوری که انتظار میره، فانکشن first اجرا میشه و به طبع فانکشن بعدی فانکشن second خواهد بود. خروجی های ما به شکل زیر خواهد بود:

// 1
// 2

تا اینجا که همه چی خوبه :)

اما فکر کنید که ما داخل فانکشن یک سری کد داریم که نمیتونه بلافاصله اجرا بشه، برای مثال ما یک ریکوئست API داریم که منتظر دریافت پاسخ هست. برای اینکه ما این شرایط رو شبیه سازی کنیم از setTimeout استفاده میکنیم که یک فانکشن جاوا اسکریپتی هست که بعد از یک زمان معین یک فانکشن رو اجرا میکنه. ما زمان اجرای فانکشنمون رو 500 میلی ثانیه تنظیم میکنیم تا بتونیم فرآیند شبیه سازی رو انجام بدیم:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

خروجی کد بالای ما چی میتونه باشه؟ آیا مثه سری قبل هست؟

خروجی کد بعد از فراخوانی:

first();
second();
// 2
// 1

ما اول فانکشن first() رو صدا کردیم اما چه اتفاقی افتاد که اولین خروجی ما مقدار فانکشن دومه؟ منطقا به این دلیل نیست که جاوا اسکریپت اومده به دلخواه خودش ترتیب رو عوض کرده. به این دلیله که جاوا اسکریپت منتظر دریافت جواب از first() نمیمونه.

اما چرا اینو گفتم؟ به این دلیل که شما نمیتونی یک فانکشن رو بعد یه فانکشن صدا کنی و امیدوار باشی که به ترتیبی که میخوای اجرا بشن. Callback یک روشی هست که شما رو مطمئن میکنه کد مد نظر ما، بعد از به اتمام رسیدن بخش های دیگه اجرا نمیشه و ترتیب لازم رعایت میشه.

ساخت Callback

حرف زدن کافیه، بیاین باهم یه Callback بسازیم :)

اگه ادیتور دم دست دارین میتونین تو اون کد بزنین در غیر این صورت Developer Console کروم رو با کلید ترکیبی ( Ctrl + Shift + J تو ویندوز) و (Cmd + Option + J تو مک) بزنید کد پایین رو تو بخش کنسول وارد کنید:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

تو بالا، ما یک فانکشن با اسم doHomework ایجاد کردیم. فانکشن ما یک ورودی به عنوان متغییر میگیره، شما میتونین به شکل زیر فراخوانی کنید:

doHomework('math');
// Alerts: Starting my math homework.

بعد از پارامتر اولمون تو فانکشن بالا ما میتونیم callback پاس بدیم به شکل زیر:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
 callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

همونطور که میبینین بعد از اجرای کد بالا شما دوتا alert پشت سر هم میگیرین. اما اینم بدونیم که اجباری نیست که ما فانکشن callback مون رو داخل فانکشن اصلی بنویسیم. میتونیم به شکل زیر عمل کنیم:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

خروجی کد بالا مثله نمونه قبلی هست تنها تفاوت تعریف فانکشن بیرون از فراخوانی فانکشن doHomework هست و ما به عنوان پارامتر دوم فانکشن دوم رو صدا زدیم.

خب یه مثال واقعی

کد پایین رو ببینید دوستان:

sample.get('search/string', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

• تو کد بالا ما یک ریکوئست با متد get ایجاد کردیم.
• ما سه تا پارامتر داریم اینجا: 'search/string' این بخش ما مسیری که باید ریکوئست زده بشه رو قرار دادیم، params هم پارامتر های سرچ ماست و در نهایت یک anonymous فانکشن داریم که در اصل callback ما هست.

تو بالا callback برای ما اهمیت داره به این دلیل که باید منتظر دریافت پاسخ مناسب از سرور باشیم تا بتونیم قدم بعدی رو انتخاب کنیم. پاسخ دریافتی چه error باشه چه successful ما میتونیم تو callback با یک if() ساده اقدام لازمو انجام بدیم.

بسیار عالی ، شما الان یه دانش نسبتا مناسبی در مورد اینکه callback چی هست و چطوری کار میکنه به دست آوردین. این مقاله به کلیات اشاره کرده و لازمه که بیشتر راجبش عمیق بشین تا درک مناسبت تری پیدا کنید.

برای اینکه از انتشار مقالات جدید تو صفحه من در ویرگول مطلع بیشید، لطفا منو دنبال کنید :)