در بخش قبلی با تکنیک زنجیر کردن متدها یا chaining در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, به نحوه تعریف تابع بازگشتی در جی کوئری یا callback function ها می پردازیم.
تابع بازگشتی در جی کوئری
دستورات جاوا اسکریپت خط به خط اجرا می شود. اما, از آنجا که افکت جی کوئری طول می کشد که به اتمام برسد, پس امکان دارد خط بعدی در حین اجرای افکت قبلی, اجرا شود.
برای جلوگیری از این اتفاق, جی کوئری یک تابع بازگشتی برای بر هر یک از متدهای افکت ارایه می دهد.
یک تابع بازگشتی در جی کوئری یا callback function بعد از اینکه افکت به پایان رسید اجرا می شود.
این تابع callback به عنوان یک آرگومان به متدهای افکت پاس داده می شود و معمولا به عنوان آخرین آرگومان متد ظاهر می شود.
برای مثال, سینتکس ساده افکت slideToggle() در جی کوئری که یک تابع بازگشتی را دریافت می کند بصورت زیر است :
|
1 |
$(selector).slideToggle(duration, callback); |
مثال زیر را درنظر بگیرید که دستورات slideToggle() و alert() را پشت سرهم قرار دادیم. اگر این کد را اجرا و روی دکمه کلیک کنید, پیام alert بلافاصله نمایش داده می شود بدون اینکه منتظر به پایان رسیدن افکت اسلاید شود.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle("slow"); alert("The slide toggle effect has completed."); }); }); </script> |
و اینجا یک نسخه ویرایش شده از مثال بالا را می بینید که دستور alert() داخل تابع بازگشتی برای متد slideToggle() قرار گرفته است.
اگر این کد jQuery را اچرا کنید پیام alert بعد از اتمام افکت اسلاید, نمایش داده می شود.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(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> |
مشابه آن, می توانید توابع بازگشتی را برای دیگر متدهای افکت جی کوئری مثل show(), hide(), fadeIn(), fadeOut(), animate() و غیره.. تعریف کنید.
نکته: اگر متد افکت برای چندین عنصر تعریف شود, تابع بازگشتی برای هر عنصر انتخابی, یکبار اجرا می شود نه برای همه.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(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> |
اگر مثال بالا را تست کنید, می بینید که یک پیام alert مشابه دوباره اجرا می شود, یکبار برای <p> و یکبار برای <h1>
امیدوارم در این بخش آموزش جی کوئری, از تابع بازگشتی در جی کوئری نهایت استفاده را برده باشید.
در بخش بعدی با روش های دستکاری (Manipulation) در جی کوئری, آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
