آموزش CallBack Functions در جاوا اسکریپت

شاید یکی از عجیب‌ترین مسائلی که بتوان درجاوا اسکریپت درباره‌ی آنها صحبت کرد، Function‌ها یا توابع باشند. توابع در زبان جاوا اسکریپت دنیایی از شگفتی هستند ومی توان با آنها کارهای جالبی انجام داد. برای مثال می‌توان یک تابع را درون یک متغیر ذخیره کرد، می‌توان توابع را به راحتی در توابع دیگر تعریف و یا آنها را تغییر داد. حتی توابع از پیش تعریف شده در جاوا اسکریپت را نیز می‌توان دست‌کاری کرد و تغییر داد! می‌توان یک تابع را به عنوان ورودی به تابع دیگر ارسال کرد و این‌گونه نسل پیشرفته‌ای از توابع را ساخت. در مقاله‌ی CallBack Functions در جاوا اسکریپت ، می‌خواهیم درباره‌ی این نسل پیشرفته از توابع، صحبت کنیم. اگر شما نیز مانند ما از تغییر دادن قوانین و به نوعی هنجارشکنی لذت می‌برید، این مقاله برای شما نوشته شده است، پس با ما همراه باشید.

آیا توابع در جاوا اسکریپت نوعی شی هستند؟

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

آیا می‌شود یک تابع را به عنوان آرگومان، به تابع دیگر ارسال کرد؟

پاسخ این سوال نیز مانند سوال قبلی مثبت است. توابع می‌توانند آرگومان‌های مختلفی را دریافت کنند. همچنین می‌توانند یک تابع را به عنوان آرگومان بپذیرند.

برای درک بهتر این موضوع، پیشنهاد می‌کنیم همراه ما قطعه کد زیر را در Editor وارد کنید:

    function firstFunc(Func){
	Func();
	}
    function secondFunc(){
	document.write( "welcome to 7learn");
	}
	firstFunc(secondFunc);

در قطعه کد بالا، تابعی با نام firstFunc تعریف کرده‌ایم و گفتیم این تابع به عنوان آرگومان یک تابع دریافت کند. در ادامه نیز تابعی با نام secondFunc تعریف کرده‌ایم. در خط بعدی تابع  firstFunc  را فراخوانی کرده و تابع secondFunc را به عنوان پارامتر به تابع ارسال کردیم.

در ادامه، تابع firstFunc،  تابع  secondFunc  را که به صورت پارامتر دریافت کرده بود، اجرا می‌کند. خروجی قطعه کد فوق به صورت زیر است:

به این‌صورت به سادگی می‌توانیم، یک تابع را به عنوان آرگومان به تابع دیگر ارسال کرده و توابع نوع پیشرفته بنویسیم.

در چه مواقعی لازم است تابعی را به عنوان آرگومان به تابع دیگر ارسال کنیم؟

قبل از هر چیزی لازم است دو موضوع را بیان کنیم:

1- در دنیای کامپیوتر کدها به دو صورت پردازش می‌شوند:

– Asynchronous یا پردازش ناهمگام (غیر همزمان): در این نوع پردازش، زمانی که پردازشگر شروع به پردازش می‌کند، بدون اینکه منتظر اتمام پردازش اول باشد، پردازش دوم را شروع می‌کند.

– synchronous یا پردازش همگام (Blocking): در این نوع پردازش، پردازشگر ابتدا پردازش اول را به طور کامل به پایان می‌رساند، سپس پردازش دوم را شروع می‌کند.

2- جاوا اسکریپت یک زبان رویداد گرا است

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

برای فهم بهتر این مطلب به مثال زیر دقت کنید:

function Func1(){
document.write("I like video game very much"+'<br>');
}
function Func2(){
document.write("my favorite writer is Darren Hardy");
}
Func1();
Func2();

در قطعه کد بالا مفسر ابتدا تابع Func1 و سپس تابع Func2 را اجرا می‌کند. خروجی قطعه کد فوق به صورت زیر است:

حال می‌خواهیم با استفاده از متد setTimeout اجرای تابع اول را کمی زمان بر کنیم:

function Func1(){
 setTimeout(function (){
 document.write("I like video game very much"+'<br>'); 
 },1000);
 } 
 function Func2(){ 
 document.write("my favorite writer is Darren Hardy"); 
 } 
 Func1();
 Func2();

متد setTimeout  دو پارامتر ورودی دریافت می‌کند. پارامتر اول یک تابع است که اغلب به صورت Anonymous یا بدون نام تعریف می‌شود(مانند قطعه کد بالا).  پارامتر دوم یک عدد است که بیانگر این است که تابع بعد از چند میلی ثانیه تاخیر اجرا شود. برای اینکه بیشتر با این توابع آشنا شوید پیشنهاد می‌کنیم این مطلب را مطالعه کنید.

در نتیجه با استفاده از تابع setTimeout  در اجرای تابع Func1 تاخیر به وجود آوردیم. حال می‌خواهیم ببینیم در خروجی چه اتفاقی می‌افتد:

function Func1(Func){
 setTimeout(function (){
 document.write("I like video game very much"+'<br>'); 
 Func();
 },5000);
 } 
 function Func2(){ 
 document.write("my favorite writer is Darren Hardy"); 
 } 
 Func1(Func2);

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}v
function getResults(results){
  console.log("Response from the server: " + results);
}
serverRequest("The glass is half ", getResults);

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

در قطعه کد بالا T.get را داریم که با استفاده از آن درخواستی را به توییتر ارسال می‌کنیم.

 T.get سه آرگومان را به عنوان ورودی دریافت می‌کند:

1. search/tweets به عنوان مسیر درخواست
2. params به عنوان موارد یا پارامترهای مورد جستجو
3. و یک تابع که عملیات خاصی را انجام می‌دهد.

در ادامه، ما نمی‌دانیم که پاسخ توییتر به درخواست ما چه چیزی است. پس با یک شرط بررسی می‌کنیم که اگر خطایی دریافت نکردیم یکسری عملیات انجام شود (به نوعی پاسخ به تابع CallBack ارسال شود تا یکسری عملیات روی آن اجرا شود.)  و اگر خطایی دریافت کردیم در console خطا نمایش داده شود.

جمع‌بندی:

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

اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.

فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر: