آشنایی با callback در جاوا اسکریپت

دوشنبه 24 تیر 1398

callback در جاوا اسکریپت نقش بسیار مهمی را ایفا می کند، در این مطلب درباره callback در جاوا اسکریپت صحبت می کنیم و اطلاعات مفیدی را به شما ارائه می دهیم.

 آشنایی با callback در جاوا اسکریپت

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

تعریف ساده یک callback در جاوا اسکریپت تابعی است که پس از اتمام اجرای یک تابع دیگر اجرا می شود، به همین علت است که نام آن را callback گذاشته اند. البته تعریف پیچیده تر و پیشرفته تری نیز برای callback در جاوا اسکریپت وجود دارد این تعریف به شکل زیر می باشد:

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

نکات بسیار زیادی در این زمینه وجود دارد، اجازه دهید مثال هایی را بررسی کنیم که این موضوع را برای شما واضح تر کند.

 callback در جاوا اسکریپت


چرا ما به callback در جاوا اسکریپت نیاز داریم؟

یک دلیل بسیار مهم برای این سوال وجود دارد و آن این است که زبان برنامه نویسی جاوا اسکریپت یک زبان مدیریت کننده رویدادها می باشد. معنی این جمله این است که جاوا اسکریپت به جای این که قبل از ادامه دادن اجرا منتظر پاسخی از طرف یک بخش از کد بماند اجرای خود را ادامه می دهد و منتظر رویدادهای دیگر می ماند. اجازه دهید که نگاهی به یکی از مثال های پایه ای در این زمینه داشته باشیم:

function first(){

  console.log(1);

}

function second(){

  console.log(2);

}

first();

second();

همانطور که شما انتظار دارید تابع first در ابتدا اجرا می شود و بعد از آن نیز تابع second به عنوان تابع دوم اجرا می شود و به همین علت عبارت زیر در کنسول چاپ می شود:

// 1

// 2

تا این جا همه چیز خوب است.

 callback در جاوا اسکریپت


پیچیده تر کردن مثال بالا

چه اتفاقی می افتد اگر تابع اول شامل برخی از کدها باشد که نتواند بلافاصله اجرا شود؟ به عنوان مثال فرض کنید یک درخواست API را ارسال کنیم و منتظر بمانیم که نتیجه آن برای ما بازگشت داده شود. برای شبیه سازی این عملیات از setTimeout استفاده می شود که یک تابع در جاوا اسکریپت می باشد که تابع دیگری را بعد از گذشت مدت زمانی فراخوانی می کند. ما این مدت زمان را برای تابع خود بر روی پانصد میلی ثانیه تنظیم می کنیم تا بتوانید یک درخواست API را شبیه سازی کنیم. حال کد جدید ما چیزی شبیه به قطعه کد زیر می باشد:

function first(){

  // Simulate a code delay

  setTimeout( function(){

    console.log(1);

  }, 500 );

}

function second(){

  console.log(2);

}

first();

second();

در حال حاضر مهم نیست که شما درک کنید که setTimeout() به چه شکل کار می کند، تمام چیزی که مهم است این است که ما console.log(1) خود را به داخل یک بازه تاخیری 500 میلی ثانیه ای منتقل کردیم. حال چه اتفاقی می افتد اگر ما توابع خود را فراخوانی کنیم؟

first();

second();

// 2

// 1

اگر چه ما تابع first() را در ابتدا فراخوانی کردیم مشاهده می کنیم که خروجی آن بعد از تابع second() برای ما چاپ می شود.

توجه داشته باشید که این به آن معنا نیست که جاوا اسکریپت کدهای ما را به آن ترتیبی که آنها را نوشته ایم اجرا نکرده است بلکه به آن معنا است که جاوا اسکریپت برای اجرا کردن تابع دوم منتظر نتیجه تابع اول نمی ماند و بلافاصله بعد از اجرای تابع اول تابع دوم را نیز اجرا می کند.

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

 callback در جاوا اسکریپت


ساخت یک callback در جاوا اسکریپت( بخش اول)

بعد از تمامی این توضیحات اجازه دهید که اقدام به ساخت یک callback در جاوا اسکریپت کنیم.

ابتدا Chrome Developer Console را باز کنید( در ویندوز با دستور Ctrl + Shift + J و در مک نیز با دستور Cmd + Option + J) و سپس تابع زیر را در داخل کنسول خود وارد کنید:

function doHomework(subject) {

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

}

در قسمت بالا ما تابع do Homework را ساختیم ، تابع ما یک متغیر دریافت می کند، با استفاده از کد زیر در کنسول خود تابع خود را فراخوانی کنید:

doHomework('math');

// Alerts: Starting my math homework.

حال اجازه دهید که callback خود را به آن اضافه کنیم، به عنوان آخرین آرگومان در تابع do Homework() ما می توانیم callback خود را به آن ارسال کنیم. تابع callback به عنوان دومین آرگومان در هنگام فراخوانی تابع do Homework() تعریف می شود.

function doHomework(subject, callback) {

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

  callback();

}


doHomework('math', function() {

  alert('Finished my homework');

});

 callback در جاوا اسکریپت


ساخت یک callback در جاوا اسکریپت( بخش دوم)

همانطور که مشاهده می کنید اگر شما کد بالا را در کنسول خود تایپ کنید شما دو هشدار را دریافت خواهید کرد. هشدار ‘starting homework’ را بعد از هشدار ‘finished homework’ دریافت می کنید. اما تابع های callback در جاوا اسکریپت نیازی ندارند که حتما در فراخوانی تابع ما تعریف شوند. آنها می توانند در جایی دیگر از کد ما تعریف شوند، مانند مثال زیر:

function doHomework(subject, callback) {

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

  callback();

}

function alertFinished(){

  alert('Finished my homework');

}

doHomework('math', alertFinished);

نتیجه این مثال دقیق مشابه نتیجه مثال قبلی می باشد اما تنظیمات آن کمی متفاوت است. همانطور که می توانید مشاهده کنید ما تعریف تابع alert Finished را در طول فراخوانی تابع do Homework() به عنوان آرگومان ارسال کردیم.

 callback در جاوا اسکریپت


یک مثال واقعی

هفته گذشته من مقاله ای را مطالعه کردم که درباره ساخت یک ربات توییتر تنها در 38 خط کد بود، تنها دلیلی که باعث می شد تا کدی که در آن مقاله وجود داشت، کار کند این بود که استفاده از API توییتر در آن بود. زمانی که شما یک درخواست را برای API ایجاد می کنید شما باید منتظر بمانید تا پاسخ این درخواست ارسال شود قبل از آن که بخواهید با این درخواست کاری انجام دهید. این یک مثال عجیب از استفاده  callback در جاوا اسکریپت در دنیای واقعی می باشد. در این جا بیان می کنیم که این مثال شبیه به چه چیزی است:

T.get('search/tweets', params, function(err, data, response) {

  if(!err){

    // This is where the magic will happen

  } else {

    console.log(err);

  }

})

-          T.get نشان دهنده این است که ما یک درخواست get برای API توییتر ایجاد کرده ایم.

-          در این درخواست سه پارامتر وجود دارد، پارامتر اول ‘search/tweets’ است که ریشه درخواست ما می باشد، params که پارامتر جست و جوی ما می باشد و یک تابع ناشناس که در واقع همان callback در جاوا اسکریپت می باشد.

این callback در این جا بسیار مهم است چرا که ما به آن نیاز داریم تا با استفاده از آن منتظر یک پاسخ از سرور بمانیم قبل از آن که بتوانیم در کد خود پیشروی کنیم. ما نمی دانیم آیا درخواست API ما موفقیت آمیز خواهد بود یا خیر به همین دلیل بعد از ارسال پارامتر هایمان به search/tweets از طریق درخواست get ما منتظر می مانیم. زمانی که API توییتر پاسخ مناسبی را ارسال می کند تابع callback در جاوا اسکریپت فراخوانی می شود. API توییتر همچنین می تواند یک شی ارور را به ما ارسال کند. در تابع callback ما می توانیم از یک دستور if استفاده کنیم که تعیین کنیم که درخواست ما موفقیت آمیز بوده یا خیر و در هر شرایطی با داده های جدید برنامه را ادامه دهیم.

 callback در جاوا اسکریپت


شما موفق شدید که callback در جاوا اسکریپت را درک کنید

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

 callback در جاوا اسکریپت

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید