Chaining و توابع callback و متد stop در جی کوئری

بعد از مشاهده افکت های مختلف در jQuery که در قسمت های قبل آمد و بعد از کار کردن با متد animate، در ابتدای این قسمت به این سوال پاسخ می دهیم که چطور می توان یک animation را متوقف کرد به همین منظور به سراغ متد stop در جی کوئری می رویم.

متد stop در جی کوئری

با استفاده از متد ()stop می توان یک animation یا افکت را متوقف کرد. در واقع این موضوع از آن جایی اهمیت دارد که قبل از پایان یافتن انیمیشن یا افکت روی عناصر انتخاب شده، توقف رخ می دهد.

ساختار پایه استفاده از متد ()stop به صورت زیر می باشد:

$(selector).stop(stopAll, goToEnd);

اکنون ساختاری را که در بالا آمده است، شرح می دهیم:

پارامتر اختیاری stopAll که از نوع boolean می باشد. این پارامتر مشخص می کند که آیا همه انیمیشن هایی که در صف اجرا قرار دارند، متوقف شوند یا خیر. مقدار پیش فرض برای این پارامتر false می باشد و بنابراین در حالت پیش فرض فقط انیمیشن جاری متوقف می شود.
پارامتر اختیاری goToEnd مشخص می سازد که انیمیشن فوراً به حالت پایان رود و در حقیقت به سرعت کامل شود. مقدار پیش فرض برای این پارامتر که از نوع Boolean نیز می باشد، false می باشد.

کد مثال زیر، یک استفاده کاربردی در یک شرایط واقعی را از متد stop در جی کوئری نشان می دهد. شما با کلیک روی یک دکمه (button) می توانید انیمشن را متوقف و یا آن را دوباره start کنید:

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

نکته: متد ()stop جهت بکارگیری در همه افکت های fading ،sliding ،animated show و hide و همچنین افکت های شخصی سازی شده کاربرد دارد.

در کد زیر کاربرد دیگری از متد ()stop را مشاهده می کنید. با کلیک روی دکمه "Slide Toggle" بعد از شروع انیمیشن و قبل از کامل شدن آن، انیمیشن طریقه حرکت خود را تغییر می دهد و تا همان جایی که آمده بود متوقف می شود و فوراً در مسیر مخالف حرکت می کند:

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

ساخت افکت Hover با حرکت آهسته

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

برای حل این موضوع می توانید از متد ()stop استفاده کنید. به این صورت که بعد از هر بار درخواست اجرای افکت روی عنصر یا عناصر درخواستی، ابتدا افکت قبلی روی آن عناصر متوقف می شود و سپس افکت جدید اجرا خواهد شد. با این استراتژی دیگر با کلیک های پی در پی صفی از افکت ها ایجاد نخواهد شد. بلکه در همان لحظه که یک افکت درخواست شود، فقط همان افکت اجرا خواهد شد و افکت در حال اجرا یا سایر افکت های موجود در صف متوقف می شوند.

در کد زیر می توانید این کاربرد را مشاهده کنید:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

نکته: متد (stop(true, true در jQuery همه انیمیشن های موجود در صف را پاک می کند و به انیمیشن کنونی می رود تا آن را به مقدار نهایی برساند.

اتصال متدها در jQuery

حالا در ادامه مباحث تکمیلی در رابطه با افکت ها، به اتصال متدها در jQuery می پردازیم. این ویژگی به این صورت کاربرد دارد که چند متد را به یک دیگر متصل می کند تا روی عنصر یا عناصر انتخابی همزمان و به ترتیب اجرایی (مانند یک زنجیر به هم پیوسته) تأثیر بگذارند و نکته مهم تر آن که همه این ها فقط در یک خط کد انجام می شوند.

این ویژگی به این جهت که متدهای jQuery یک شی jQuery را بر می گردانند که فراخواندن و استفاده از یک متد دیگر در jQuery را امکان پذیر می سازند، وجود دارد. کد مثال زیر نمونه ای از بکارگیری اتصال یا زنجیره متدها را نشان می دهد:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
});  
</script><script>

کد بالا اتصال 3 متد ()animate را نشان می دهد که یک زنجیره را پدید آورده اند. زمانی که کاربر روی دکمه کلیک می کند، عرض تگ <p> تا 100% افزایش پیدا می کند. به محض آن که عمل افزایش عرض پاراگراف به پایان رسید، متد انیمیشن بعدی که خاصیت font-size را تغییر می دهد، آغاز می شود. سپس به ترتیب متد بعدی که روی خاصیت border-width تأثیر می گذارد، اجرا می گردد.

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

برای خوانایی بیش تر کد می تواند یک خط کد از زنجیره متدها را در چند خط کد تقسیم کنید. به عنوان مثال به کد زیر که بازنویسی کد مثال بالا است، توجه کنید:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p")
            .animate({width: "100%"})
            .animate({fontSize: "46px"})
            .animate({borderWidth: 30});
    });
});  
</script>

اگر متدی در jQuery یک متد setter باشد، شما می توانید از نتیجه آن برای پیوستن به متد بعدی و تشکیل زنجیره مانند مثال بالا استفاده کنید، زیرا یک متد setter در jQuery، یک آبجکت یا شیء jQuery را باز می گرداند اما همه متدهای jQuery نمی توانند در یک زنجیره یا اتصال متدها، استفاده شوند.

ممکن است متدی getter باشد، در این صورت به جای شیء، مقدار درخواست شده را بر می گرداند. در این شرایط نمی توانید در ادامه این متد زنجیره ای را ادامه دهید. در واقع نمی توانید از نتیجه خروجی متد getter در اتصال متدها استفاده کنید. یک نمونه از متدهای getter در jQuery، متد ()html است. اگر پارامتری به این متد فرستاده نشود، این متد محتوای html عنصر انتخاب شده را به جای یک شیء jQuery بر می گرداند.

در کد مثال زیر این متد بررسی شده است:

<script>
$(document).ready(function(){
    $("button").click(function(){
        // This will work
        $("h1").html("Hello World!").addClass("test");
        
        // This will NOT work
        $("p").html().addClass("test");
    });
});
</script>

در ادامه آخرین مبحثی که به افکت ها مربوط می شود در رابطه با توابع callback است و آن ها را بررسی می کنیم.

توابع callback در jQuery

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

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

به عنوان مثال ساختار پایه متد ()slideToggle به همراه یک callback به صورت زیر می باشد:

$(selector).slideToggle(duration, callback);

مثال زیر را در حالی که متدهای ()slideToggle و ()alert را در کنار یکدیگر آورده ایم، مشاهده می کنید. وقتی روی دکمه کلیک می کنید قبل از پایان sliding، متد ()alert اجرا می گردد:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

و کد زیر نسخه اصلاح شده کد بالا می باشد. مشاهده می کنید که این بار ()alert به عنوان تابع callback منتظر می ماند تا افکت اجرا شود و بعد از پایان آن اجرا می گردد. در واقع پیام روی صفحه بعد از اجرای کامل متد ()slideToggle مشاهده می شود:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

به طریق مشابه می توانید توابع callback را برای سایر افکت های jQuery از جمله: ()show() ،hide() ،fadeIn() ،fadeOut() ،animate و... بکار ببرید.

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

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

در کد بالا تابع callback یک بار به ازای h1 و یک بار نیز به ازای p نیز اجرا می گردد.

در اینجا مباحث مربوط به افکت ها در jQuery به پایان رسید. در ادامه به سراغ manipulation در jQuery می پردازیم.