خانه | وبلاگ | Callback جاوااسکریپت چیست و چگونه کار می‌کند؟

Callback جاوااسکریپت چیست و چگونه کار می‌کند؟
Callback جاوااسکریپت چیست و چگونه کار می‌کند؟

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

callback چیست؟

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

متغیرهای جاوااسکریپت: نوع داده و نام متغیر در جاوااسکریپت

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

به یک دلیل بسیار مهم – جاوااسکریپت زبان برنامه نویسی رویدادمحور است. این بدان معناست که به جای انتظار برای پاسخی پیش از ادامه دادن، جاوااسکریپت به اجرا ادامه خواهد داد درحالیکه به رویدادهای دیگر نیز گوش می دهد. به مثال زیر نگاهی بیاندازید.

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

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

first();
second();

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

// 1
// 2

اما اگر تابع اول یک سری کد داشته باشد که نبایستی فورا اجرا شود چطور؟ برای مثال، یک درخواست API که ما بایستی ابتدا ارسالش کرده و سپس منتظر پاسخ آن باشیم؟ برای شبیه سازی این اقدام، از setTimeout استفاده می کنیم که متد خود جاوااسکریپت است که می تواند تابعی را پس از تاخیری مشخص فرابخواند. ما تابع خود را برای 500 میلی ثانیه به تاخیر می اندازیم تا درخواست 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 فراخوانده می شود.

شیوه نوشتار جاوااسکریپت

این بدان معنا نیست که جاوااسکریپت توابع مان را به شکلی که ما می خواهیم مرتب کرده است بلکه جاوااسکریپت برای پاسخ ()first پیش از رفتن به اجرای ()second منتظر نمانده است.

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

ساخت callback

تابع زیر را در نظر داشته باشید

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

در بالا ما تابع doHomework را ساختیم. تابع ما یک متغیر قبول می کند، یعنی subject که میخواهیم با آن کار کنیم. تابع خود را تایپ کرده و کد زیر را فرابخوانید.

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

حالا اجازه دهید به عنوان آخرین پارامتر در تابع ()doHomework عبارت callback را بیافزاییم. تابع callback در آرگومان دوم از تابع ()doHomework تعریف می شود.

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

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

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

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

function alertFinished(){
  alert('Finished my homework');
}

doHomework('math', alertFinished);

نتیجه این مثال دقیقا به مانند مثال پیشین است اما راه اندازی آن اندکی متفاوت است. همانطور که میبینید، ما تابع alertFinished را به عنوان آرگومانی طی فراخوانی تابع ()doHomework عبور دادیم.

یک مثال ملموس‌تر

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

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 را به توییتر میفرستیم.
  • سه پارامتر در این درخواست وجود دارد: search/tweets ریشه درخواست‌مان است، params که پارامترهای جستجو است و سپس تابع ناشناس که callback ماست.

عملگرهای جاوااسکریپت: عملگرهای منطقی، ریاضی و مقایسه‌ای

callback جاوااسکریپت در اینجا بدین دلیل مهم است که ما بایستی منتظر پاسخ از سرور باشیم پیش از اینکه به قسمت دیگر کدمان برویم. پس از ارسال پارامترهایمان به search/tweets از طریق درخواست GET ما نمی دانیم که آیا درخواست API مان موفق خواهد بود یا خیر. وقتیکه توییتر پاسخ می دهد، تابع callback ما اجرا می شود. در این وضعیت توییتر یا یک err(error) یا یک پاسخ را به ما بازخواهد گرداند.

در تابع callback ما از عبارت ()if استفاده میکنیم تا بررسی کنیم که آیا درخواستمان موفق بوده یا خیر و سپس طبق داده جدید عمل کنیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *