JavaScript Academy · درس

queueMicrotask وترتيب التنفيذ

تحكّموا بدقة في ترتيب التنفيذ.

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

التعرّف على queueMicrotask

يوفّر queueMicrotask طريقة مباشرة لجدولة مهمة مصغّرة من دون إنشاء Promise. تُنفَّذ دالة الاستدعاء بعد انتهاء التعليمات المتزامنة الحالية، ولكن قبل أي مهمة كبرى.

وهو الأداة الأنسب لتأجيل العمل إلى نقطة التحقق التالية للمهام المصغّرة مباشرةً.

الاستخدام الأساسي

مرّر دالة إلى queueMicrotask. تُنفَّذ بعد انتهاء التعليمات المتزامنة.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

الأولوية نفسها التي تتمتع بها Promises

تشترك دالة استدعاء queueMicrotask ودالة .then الخاصة بـ Promise في قائمة المهام المصغّرة. وتُنفَّذان وفق ترتيب جدولتهما.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

تسبق setTimeout

مثل جميع المهام المصغّرة، تُنفَّذ دالة استدعاء queueMicrotask قبل أي مهمة كبرى ينشئها setTimeout، حتى تلك التي تمت جدولتها مسبقًا.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

الترتيب داخل عملية الإفراغ

تُنفَّذ المهام المصغّرة وفق ترتيب FIFO. فتُنفَّذ أول مهمة أُضيفت إلى القائمة أولًا عند إفراغها.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

تداخل المهام المصغّرة

يمكن لمهمة مصغّرة أن تضيف مهمة مصغّرة أخرى إلى القائمة. تُنفَّذ المهمة الجديدة أثناء عملية الإفراغ نفسها، بعد المهام الموضوعة حاليًا في القائمة، وقبل أي مهمة كبرى.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

عرض توضيحي للترتيب الكامل

اجمع بين التعليمات المتزامنة والمهام المصغّرة ومهمة كبرى. تتبّع القاعدة: التنفيذ المتزامن أولًا، ثم المهام المصغّرة بالترتيب، ثم المؤقت.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

التداخل مع async/await

يُعدّ استئناف التنفيذ بعد await مهمةً مصغّرة أيضًا، لذلك يتداخل مع queueMicrotask وفق ترتيب الجدولة.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

لماذا نستخدم queueMicrotask؟

استخدمه عندما تحتاج إلى تأجيل جزء صغير من العمل بعد مكدس الاستدعاءات الحالي، ولكن قبل أن يرسم المتصفح أو يُنفَّذ أي مؤقت. فهو يتجنب التكلفة الإضافية وآلية التسوية الخاصة بإنشاء Promise مؤقت لا حاجة إليه.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

تجنّب حلقات المهام المصغّرة اللانهائية

بما أن المهام المصغّرة تُفرَّغ بالكامل قبل المهام الكبرى، فإن دالة الاستدعاء التي تعيد إضافة نفسها إلى القائمة دائمًا ستحجب المؤقتات والعرض إلى الأبد. احرص دائمًا على وجود شرط إيقاف.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

النموذج الذهني الكامل

في كل دورة من حلقة الأحداث: نفّذ مهمة كبرى (أو النص البرمجي الأولي)، ثم أفرغ جميع المهام المصغّرة، ثم نفّذ العرض، وكرّر ذلك. يتيح لك queueMicrotask الارتباط بدقة بمرحلة الإفراغ هذه.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

تحقق سريع

أين تُنفَّذ دالة استدعاء queueMicrotask بالنسبة إلى setTimeout(fn, 0)؟

مراجعة: queueMicrotask والترتيب

لقد أتقنت الجدولة الدقيقة:

يجدول queueMicrotask مهمة مصغّرة من دون Promise.
ويشترك مع دوال استدعاء Promise في قائمة المهام المصغّرة، وفق ترتيب FIFO.
تُفرَّغ جميع المهام المصغّرة قبل أي مهمة كبرى وقبل العرض.
نموذج الحلقة هو: مهمة كبرى، إفراغ المهام المصغّرة، عرض، ثم تكرار.

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

هل درس «queueMicrotask وترتيب التنفيذ» مجاني؟

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

ماذا ستتعلم في «queueMicrotask وترتيب التنفيذ»؟

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

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

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

كم من الوقت يستغرق درس «queueMicrotask وترتيب التنفيذ»؟

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

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

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

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

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