47
تشکر

برنامه نویسی به صورت callback در جاوا اسکریپت

جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

نوع برنامه نویسی callback در زبان جاوا اسکریپت خیلی زیاد استفاده میشود. برای مثال در کتابخانه jQuery شما میتوانید یک تابع را در انتهای اجرای یک انیمیشن (تابع animate) اجرا کنید. از این نمونه‌ها در زبان و کتابخانه‌های جاوا اسکریپت بسیار زیاد دیده میشود. در این مطلب میخواهیم یادآوری دوباره ای در نحوه نوشتن برنامه یا تابع به صورت callback را داشته باشیم.

در ادامه مطلب همراه ما باشید…

مثال گفته شده در بالا در jQuery به صورت زیر است:

$("element").animate({"top": "45px"}, function() {
  alert("animate done!");
});

پیغام !animate done زمانی ظاهر می‌شود که انمیشن به پایان رسیده باشد و مهم نیست که پایان آن چند ثانیه به طول می انجامد.

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

تابع را به صورت زیر مینویسیم:

function prom(value, callback) {
  var result = prompt(value);
  return callback(result);
}

در خط اول تابع پیغامی به کاربر نمایش میدهیم که نوشته درون پیغام را پارامتر value قرار میدهیم. بعد از اینکه کاربر نامش را وارد کرد در خط دوم ما مقدار نوشته شده توسط کاربر را به پارامتر دوم یعنی callback برگشت میدهیم.

حالا به صورت زیر میتوان از تابع بالا استفاده کرد.

prom('what<code>s your name?', function(res) {
  console.log(res);
});

همانطور که میدانید تابع prom که در ابتدا نوشتیم دارای دو پارامتر به نام های value و callback بود. حالا در کد بالا ما به جای پارامتر value پیغام خود به کاربر را نوشتیم و به جای پارامتر callback یک تابع باز کردیم، که این تابع زمانی اجرا می‌شود که تابع prom بازگشت داده باشد و ما نتیجه را درون console نمایش میدهیم.

البته توجه داشته باشید که اینکار را نیز میتوان بدون استفاده از روش callback هم انجام داد و ما فقط برای معرفی callback از این مثال استفاده کردیم.

اگر نمونه بالا را اجرا کرده باشید، خواهید دید که کاربر میتواند روی گزینه cancel کلیک کند، ولی برای مثال ما به نام کاربر خیلی احتیاج داریم و میخواهیم در صورت cancel شدن از طرف کاربر پیغام را دوباره نمایش دهیم، پس یک پارامتر دیگر به تابع prom اضافه میکنیم که در صورت true بودن، ما پیغام را تا زمانی که کاربر آن را OK نکند نشان میدهیم.

function prom(value, callback, noCancel) {
  var result = null;
  if(noCancel) {
    while(!result) {
      result = prompt(value);
    }
  } else {
    result = prompt(value);
  }
  return callback(result);
}

و مقدار پارامتر سوم را به صورت زیر میفرستیم:

prom('what</code>s your name?', function(res) {
  console.log(res);
}, true);


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

اما روش جدید دیگری نیز با نام promises در EcmaScript6 که پایه زبان JavaScript است معرفی شده است که در مطلبی جداگانه به آن میپردازیم.

  • یو پی اس می‌گه:

    مرسی از زحماتتون موفق باشین

  • خیلی عالی بود ممنون از مطالبتون

  • تور ترکیه می‌گه:

    ممنون خسته هم نباشید

  • کاناپه بادی می‌گه:

    عالی بود مممنون خیلی مفید بود

  • خرید سایت می‌گه:

    ممنون خسته هم نباشید

  • قسمت تشکر سایتتون باگ داره یعنی الان من سورس صفحه رو بررسی کردم و توی قسمت laravel بیست تا تشکر زدم .
    برای قسمت نظرات یا همون دیدگاه ها هم باید یه کد کپچا بزارید وگرنه میشه اسپمر ساخت برای سایتتون
    راستی چند تا مشکل امنیتی دیگه هم دارید اینجا جاش نیست که بزارم
    موفق باشید وبتون خیلی اموزنده هست من هر چند وقت سر میزنم مطالب جدید و به روزی رو میبینم

    • محسن شفیعی می‌گه:

      درسته. من قسمت تشکر سایت رو با استفاده از کوکی ساختم. تعداد تشکرها تاثیر چندانی در روند سایت نداره، شما بیستا تشکر زدید حتما خیلی خوشتون اومده
      😀

  • mahdikhanzadi می‌گه:

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

  • تابع prompt توسط مرورگر اینترنت اکسپلورر به دلایل امنیتی به طور پیش فرض بلوکه شده و مرورگرهای دیگه هم در اینده ان رو بلوکه خواهند کرد پس بهتره استفاده نشه , تابع alert هم در اینده همین بلا سرش خواهد امد چون خیلی مزاحمت برای کاربر ایجاد میکنه و notification به خاطر رفع این مزاحمت ها ایجاد شده و جایگزین alert خواهد شد.
    به جای prompt میتونیم یه تگ div با یه textbox توی صفحه تعبیه کنیم و هروقت نیاز داشتیم با جاوا اسکریپت ظاهرش کنیم.
    موفق باشید


  • نظرات این مطلب بسته است.