در jQuery، توابع callback
در jQuery، توابع callback (یا بازگشتی) توابعی هستند که پس از تکمیل یک عمل یا رویداد خاص اجرا می‌شوند. این توابع معمولاً در عملیات‌های ناهمزمان مانند انیمیشن‌ها، درخواست‌های AJAX یا مدیریت رویدادها استفاده می‌شوند. توابع callback کمک می‌کنند تا اطمینان حاصل شود که یک بخش خاص از کد تنها پس از اتمام یک وظیفه خاص اجرا می‌شود.
نحو اصلی
در jQuery، یک تابع callback معمولاً به عنوان یک آرگومان به یک تابع دیگر ارسال می‌شود. برای مثال:
$(‘#element’).hide(1000, function() {
alert(‘انیمیشن کامل شد!’);
});
در مثال بالا:
- متد
hide()عنصر با شناسهelementرا در مدت1000میلی‌ثانیه (1 ثانیه) پنهان می‌کند. - تابع callback پس از اتمام انیمیشن اجرا می‌شود و پیام هشدار را نمایش می‌دهد.
انواع توابع Callback در jQuery
- Callbackهای انیمیشن: متدهای انیمیشن jQuery مانند
fadeIn(),fadeOut(),slideUp(),slideDown()وanimate()از توابع callback پشتیبانی می‌کنند. این متدها تابع callback را دریافت می‌کنند که پس از اتمام انیمیشن اجرا می‌شود.
مثال:
$(‘#box’).fadeOut(1000, function() {
console.log(‘Fade out کامل شد!’);
});
- در این مثال، متد
fadeOut()عنصر را محو می‌کند و پس از اتمام انیمیشن، تابع callback پیامی را در کنسول چاپ می‌کند.
2. Callbackهای AJAX: زمانی که درخواست‌های AJAX را با استفاده از $.ajax() ارسال می‌کنید، می‌توانید توابع callback برای رویدادهای مختلف مانند موفقیت، خطا یا تکمیل درخواست تعریف کنید.
مثال:
$.ajax({
url: ‘https://api.example.com/data’,
method: ‘GET’,
success: function(response) {
console.log(‘درخواست با موفقیت انجام شد’, response);
},
error: function(error) {
console.log(‘خطا رخ داده است’, error);
},
complete: function() {
console.log(‘درخواست تمام شد’);
}
});
- در این مثال:
success: تابع callback که زمانی که درخواست با موفقیت انجام می‌شود اجرا می‌شود.error: تابع callback که در صورت بروز خطا در درخواست اجرا می‌شود.complete: تابع callback که پس از اتمام درخواست، چه موفق باشد و چه ناموفق، اجرا می‌شود.
- Callbackهای رویداد: jQuery همچنین به شما این امکان را می‌دهد که برای رویدادهای مختلفی مانند
click,hover,submitو غیره، توابع callback تعریف کنید.مثال:
$(‘#button’).click(function() {
alert(‘دکمه کلیک شد!’);
});
- در اینجا، تابع callback زمانی که رویداد
clickبر روی عنصر با شناسهbuttonفعال می‌شود اجرا می‌شود. - Deferreds و Promises: jQuery اشیاء Deferred را فراهم می‌کند که روشی برای مدیریت توابع callback در هنگام عملیات ناهمزمان با استفاده از promises است. شیء
$.Deferred()به شما این امکان را می‌دهد که توابع callback برای موفقیت، شکست و پیشرفت تعریف کنید.مثال:
var deferred = $.Deferred();
// عملیاتی ناهمزمان (مانند timeout یا درخواست AJAX)
setTimeout(function() {
deferred.resolve(‘داده بارگذاری شد’);
}, 1000);
// تابع callback برای موفقیت
deferred.done(function(message) {
console.log(message);
});
// تابع callback برای شکست
deferred.fail(function() {
console.log(‘مشکلی پیش آمد’);
});
نکات کلیدی
- رفتار ناهمزمان: توابع callback در jQuery معمولاً برای مدیریت عملیات‌های ناهمزمان مانند انیمیشن‌ها، AJAX و تعاملات کاربر استفاده می‌شوند.
- توابع Callback به عنوان آرگومان به توابع دیگر ارسال می‌شوند (مانند
hide(),fadeOut(), یا$.ajax()). - شما می‌توانید توابع callback را به هم پیوند دهید تا مراحل مختلف یک فرآیند را مدیریت کنید.
اگر به توضیحات یا مثال‌های بیشتری نیاز دارید، خوشحال می‌شوم کمک کنم!
دیدگاهتان را بنویسید