نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2347
تاریخ بروزرسانی ۹ فروردین ۱۴۰۱

تابع callback در jquery

مفهوم تابع Callback در جاوا اسکریپت

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

تابع callback زمانی انجام می شود که که یک افکت به طورکامل اجرا شده باشد. در واقع با استفاده از تابع callback می توان افکت ها و بقیه دستورات را اولویت بندی کرد. در این مقاله می خواهیم چند مثال از کدهای جی کوئری با و بدون تابع callback را به شما عزیزان نشان دهیم. اگر قصد دارید تا تفاوت این دو را به خوبی درک نمایید با طراحی سایت اصفهان وب یار همراه باشید.

 

مثال از تابع Callback

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

 

خروجی کد بالا:

تابع callback در jquery

توضیح کد:

برای نوشتن کد جی کوئری ابتدا باید از دستور بالا استفاده کنید و سپس بقیه ی کدها را در آن قرار دهید.

این کد به این معنی است که وقتی برروی دکمه کلیک شد، قطعه کدی که داخل فانکشن است اجرا شود. توجه کنید که در تگ body از یک تگ button استفاده شده است. ولی اگر دو تگ button داشتید نمی توانستید از کلمه button به عنوان آیدی استفاده کنید و باید به هر یک از دکمه ها یک آیدی منحصر به فرد اختصاص بدهید و این گونه بنویسید :

$(“#btn1”)

 

این کد به این معناست که تگ p با حرکت آهسته پنهان شود و بعد از آن یک پیغام برای شما به نمایش در بیاید.

 

مثال بدون تابع Callback:

در مثال زیر تابع  alert  قبل از اجرا شدن افکت hide اجرا می شود.

خروجی کد را می توانید در تصویر زیر مشاهده نمایید.

افکت hide بدون تابع callback

یک مثال دیگر با تابع callback

 

در این کد از افکت slidetoggle استفاده شده است. این افکت، دو افکت slideUp و slideDown را روی عناصر اعمال می کند. در این مثال، h1 به عنوان اسلاید اول و p به عنوان اسلاید دوم درنظر گرفته شده است. اگر بخواهید زمانی که اسلاید دوم می آید اسلاید اول پنهان شود باید به این صورت بنویسید (“h1, p”)$ ولی اگر می خواهید اسلاید دوم بالای اسلاید اول قرار گیرد باید به جای (“h1, p”)$ این کد را (“h1 “)$ قرار دهید.

خروجی کد

افکت slidetoggle به همراه تابع callback

 

نکته:  استفاده از متد slidetoggle به این صورت است :

در مثال بعد افکت fadein همراه با تابع callback را در اختیار شما قرار می دهیم.

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

خروجی به شرح زیر می باشد.

متد fadeIn

نتیجه

در این مقاله به آموزش تابع callback در jquery پرداختیم. اگر به مبحث جی کوئری علاقمند هستید می توانید مقالات آموزش مرجع چی کوئری را مشاهده کنید.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.