jQuery Academy · درس

فهم الكائنات المؤجّلة

استوعب المفاهيم الأساسية لكائنات jQuery Deferred، وكيف تمثّل العمليات غير المتزامنة، وحالاتها (معلّقة، محلولة، مرفوضة).

الدرس 1 من 312 خطوة

فهم الكائنات المؤجّلة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

العمليات غير المتزامنة وعمليات رد النداء

في تطوير الويب، لا تحدث العديد من المهام على الفور. فكروا مثلًا في جلب البيانات من خادم أو انتظار نقرة من المستخدم. هذه هي العمليات غير المتزامنة.

تقليديًا، نستخدم عمليات رد النداء: وهي دوال لا تعمل إلا بعد انتهاء مهمة غير متزامنة. لكن تداخل عمليات رد النداء قد يؤدي إلى ما يُعرف بـ "جحيم عمليات رد النداء"، مما يجعل قراءة التعليمات البرمجية وصيانتها أمرًا صعبًا.

تعرّفوا على jQuery Deferred

هنا تأتي كائنات Deferred في jQuery للإنقاذ! فكائن Deferred وسيلة قوية لإدارة العمليات غير المتزامنة بطريقة أكثر تنظيمًا.

وهو يعمل كعنصر نائب لنتيجة مستقبلية. إذ يمكنكم إرفاق دوال به لتعمل عند انتهاء العملية، سواء نجحت أم فشلت، من دون حظر التعليمات البرمجية الرئيسية.

الحالات الثلاث لكائن Deferred

يمكن أن يكون كائن Deferred في واحدة من ثلاث حالات، تعكس حالة المهمة غير المتزامنة التي يمثلها:

قيد الانتظار: الحالة الأولية. لم تكتمل العملية بعد.
تم الحل: اكتملت العملية بنجاح.
مرفوض: فشلت العملية أو واجهت خطأ.

بمجرد حل كائن Deferred أو رفضه، لا يمكن تغيير حالته مرة أخرى.

إنشاء كائن Deferred

تنشئون كائن Deferred جديدًا باستخدام $.Deferred(). ويبدأ هذا الكائن في حالة قيد الانتظار.

ويوفر طرقًا لتغيير حالته وتسجيل دوال رد النداء التي ستُنفذ عند تغير الحالة.

جرّبوا إنشاء كائن:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

الإشارة إلى النجاح: .resolve()

عند اكتمال العملية غير المتزامنة بنجاح، تستدعون الطريقة .resolve() على كائن Deferred.

يؤدي ذلك إلى تغيير حالته من قيد الانتظار إلى تم الحل. وستُمرر أي معاملات تمررونها إلى .resolve() إلى عمليات رد النداء الخاصة بالنجاح.

راقبوا تغير الحالة:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

الإشارة إلى الفشل: .reject()

إذا فشلت العملية غير المتزامنة، تستدعون الطريقة .reject().

يؤدي ذلك إلى تغيير حالة Deferred من قيد الانتظار إلى مرفوض. وستُرسل المعاملات الممررة إلى .reject() إلى عمليات رد النداء الخاصة بالفشل، وغالبًا ما تكون رسائل خطأ.

شاهدوا كيفية عمل الرفض:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

معالجة النجاح باستخدام .done()

للاستجابة لعملية ناجحة (عندما يكون Deferred في حالة تم الحل)، أرفقوا دالة رد نداء باستخدام الطريقة .done().

لن تُنفذ هذه الدالة إلا عند استدعاء .resolve()، وستتلقى أي معاملات مررها .resolve().

لنعالج بعض البيانات:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

معالجة الفشل باستخدام .fail()

وبالمثل، لمعالجة الأخطاء (عندما يكون Deferred في حالة مرفوض)، استخدموا الطريقة .fail().

لن تُنفذ دالة رد النداء الممررة إلى .fail() إلا عند استدعاء .reject()، وستتلقى معاملاته.

لنحاكِ خطأً:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

التنفيذ دائمًا: .always()

قد تحتاجون أحيانًا إلى تشغيل تعليمات برمجية بغض النظر عن نجاح العملية غير المتزامنة أو فشلها. وهنا تأتي الطريقة .always().

ستُنفذ دالة رد النداء المرفقة باستخدام .always() سواء كان Deferred في حالة تم الحل أم مرفوض.

استخدموا .always() لأعمال التنظيف أو تحديثات واجهة المستخدم النهائية:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

الحماية باستخدام .promise()

عند إرجاع كائن Deferred من دالة، قد لا ترغبون في تمكين التعليمات البرمجية الخارجية من تغيير حالته (مثل استدعاء .resolve() أو .reject() مباشرةً).

تعيد الطريقة .promise() إصدارًا "للقراءة فقط" من كائن Deferred. وهي لا تعرض سوى طرق إرفاق عمليات رد النداء (مثل .done() و.fail() و.always())، ولا تعرض طرق تغيير حالته.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

اختبر معلوماتك

أيّ من الطرق التالية ستستخدمون لتسجيل دالة استدعاء تُنفَّذ فقط عندما يُكمل كائن Deferred عمليته غير المتزامنة بنجاح؟

أجب عليها في الدرس التفاعلي

مراجعة: أساسيات Deferred

أحسنتم! لقد استوعبتم في هذا الدرس المفاهيم الأساسية لكائنات jQuery Deferred:

تدير العمليات غير المتزامنة، وتتجنب جحيم دوال الاستدعاء.
توجد في حالات معلّقة أو مكتملة بنجاح أو مرفوضة.
تستخدمون .resolve() عند النجاح و.reject() عند الفشل.
تُربط دوال الاستدعاء باستخدام .done() (للنجاح)، و.fail() (للفشل)، و.always() (لكليهما).
تعيد .promise() كائنًا للقراءة فقط لحماية التحكم في الحالة.

سنتعلم بعد ذلك كيفية ربط هذه الكائنات القوية وتركيبها معًا!

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 22
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «فهم الكائنات المؤجّلة» مجاني؟

نعم — نص درس «فهم الكائنات المؤجّلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «فهم الكائنات المؤجّلة»؟

استوعب المفاهيم الأساسية لكائنات jQuery Deferred، وكيف تمثّل العمليات غير المتزامنة، وحالاتها (معلّقة، محلولة، مرفوضة). تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «فهم الكائنات المؤجّلة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy