تابع بازگشتی (Callback)

گاهی می خواهی یک افکت jQuery تمام شود، تابع callback در jQuery بعدش اجرا شود. اگر بدون ترتیب کار کنی، کدها قاطی می شوند و نتیجه عجیب می شود.

تابع callback در jQuery چیست؟

در جاوااسکریپت، دستورات معمولا خط به خط اجرا می شوند. اما افکت ها مثل hide و slide کمی زمان می برند و همزمان می توانند در پس زمینه اجرا شوند.

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

تابع callback در jQuery یعنی «بعد از اینکه افکت صد درصد تمام شد، این تابع را اجرا کن». شکل کلی آن در hide این است: $(selector).hide(speed, callback);.

نکته: اینجا منظور از تابع بازگشتی، تابعی است که بعد از افکت صدا زده می شود؛ نه تابعی که خودش را تکراری صدا می زند (تابع بازگشتی ریاضی).

مثال jQuery با تابع callback

در مثال اول منبع، بعد از تمام شدن افکت hide، یک alert نمایش داده می شود. یعنی اول پاراگراف کاملا مخفی می شود، بعد پیام می آید.

$("button").click(function() {
  $("p").hide("slow", function() {
    alert("The paragraph is now hidden");
  });
});

مشاهده در ادیتور

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

نکته: به این ترتیب مطمئن هستی که تابع callback در jQuery دقیقا بعد از پایان افکت اجرا می شود، نه وسط کار.

مثال jQuery بدون تابع callback

حالا همان ایده را بدون callback ببین. این بار alert جدا نوشته شده و به hide وصل نیست. پس می تواند قبل از تمام شدن افکت اجرا شود.

$("button").click(function() {
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

مشاهده در ادیتور

اینجا hide با مدت 1000 میلی ثانیه شروع می شود. اما alert بلافاصله بعد از شروع hide اجرا می شود. پس ممکن است هنوز پاراگراف کامل مخفی نشده باشد، ولی پیام بگوید «الان مخفی شد».

هشدار: نداشتن callback در افکت ها می تواند باعث شود پیام ها، انیمیشن ها یا منوها در زمان اشتباه اجرا شوند و کاربر گیج شود.

ارتباط callback با دیگر افکت های jQuery

تابع callback فقط مخصوص hide نیست. تقریبا همه افکت های jQuery مثل fade، slide و انیمیشن های انیمیشن (Animate) می توانند پارامتر callback داشته باشند.

مثلا می توانی بعد از تمام شدن یک اسلاید، با توقف (stop()) انیمیشن بعدی را کنترل کنی یا متن دکمه را عوض کنی.

در ذهن ات مثل بازی در نظر بگیر: اول افکت اجرا می شود، بعد تابع callback در مرحله بعدی بازی اجرا می شود.

گام های عملی برای تمرین تابع callback در jQuery

1. یک صفحه ساده با چند پاراگراف و یک دکمه بساز.
2. با jQuery کاری کن که با کلیک روی دکمه، همه پاراگراف ها با hide محو شوند.
3. در مرحله بعد، به hide یک تابع callback بده که بعد از مخفی شدن، متن دکمه را به «نمایش دوباره» تغییر دهد.
4. در نهایت، نسخه بدون callback را تست کن و تفاوت زمان اجرای alert یا تغییر متن را با دقت ببین.

جمع بندی سریع

• تابع callback در jQuery بعد از پایان افکت اجرا می شود.
• قرار دادن alert داخل callback، زمان اجرای آن را دقیق می کند.
• بدون callback، کد بعدی می تواند قبل از پایان افکت اجرا شود.
• تقریبا همه افکت های jQuery می توانند callback بگیرند.
• تمرین با hide و alert، مفهوم callback را خیلی خوب جا می اندازد.