Callback و Chaining

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

تابع Callback چیست؟

Callback تابعی است که به‌عنوان پارامتر به متد دیگری داده می‌شود و پس از پایان آن عمل اجرا می‌شود. مشکل اصلی اینجاست که افکت‌های jQuery زمان می‌برند اما کد جاوااسکریپت صبر نمی‌کند:

// ❌ مشکل: hide هنوز تمام نشده، alert اجرا می‌شود!
$("p").hide(1000);
alert("مخفی شد!");  // بلافاصله اجرا می‌شود، قبل از پایان مخفی شدن!
// ✅ راه‌حل: callback پس از پایان افکت اجرا می‌شود
$("p").hide(1000, function() {
    alert("مخفی شد!");  // حالا درست است: بعد از پایان انیمیشن
});

Callback در همه افکت‌ها

همه متدهای افکت (hide، show، toggle، slideDown، slideUp، fadeIn، fadeOut و animate) پارامتر callback دارند:

// callback در animate
$("div").animate({ left: '300px' }, 1000, function() {
    console.log("به مقصد رسید!");
});

// callback در fadeOut
$("#msg").fadeOut(500, function() {
    $(this).remove();  // حذف کامل عنصر پس از محو شدن
});
اگر سرعت ندهید (مثلاً hide(callback))، callback بلافاصله اجرا می‌شود چون افکت آنی است. برای callback معنادار، حتماً سرعت هم مشخص کنید.

زنجیره‌سازی متدها (Chaining)

تا حالا کدهای jQuery را خط به خط می‌نوشتیم. اما jQuery اجازه می‌دهد چند متد را با نقطه زنجیر کنید — همه روی همان عنصر:

// بدون زنجیره
$("#p1").css("color", "red");
$("#p1").slideUp(1000);
$("#p1").slideDown(1000);

// با زنجیره — تمیزتر و سریع‌تر!
$("#p1").css("color", "red")
        .slideUp(1000)
        .slideDown(1000);

چرا زنجیره بهتر است؟

قالب‌بندی زنجیره‌های طولانی

برای خوانایی، زنجیره‌های بلند را با تورفتگی در چند خط بنویسید:

$("#myDiv")
    .css("background", "lightblue")
    .animate({ width: "300px" }, 500)
    .animate({ height: "200px" }, 500)
    .fadeOut(1000, function() {
        alert("همه کارها تمام شد!");
    });

ترکیب زنجیره و callback

// محو شدن، سپس تغییر متن، سپس ظاهر شدن
$("#msg")
    .fadeOut(400, function() {
        $(this).text("متن جدید").fadeIn(400);
    });

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط