عندما يواجه المطورون setTimeout لأول مرة في JavaScript، غالبًا ما يبدو وكأنه أداة مباشرة لتأخير تنفيذ الوظيفة. ومع ذلك، فإن فهم كيفية تفاعل setTimeout مع وقت تشغيل JavaScript وحلقة الأحداث يمكن أن يكشف عن بعض السلوكيات غير المتوقعة، خاصة في ظروف معينة. وهي ليست مجرد setTimeout؛ تنشأ تعقيدات مماثلة مع setInterval والوظائف غير المتزامنة الأخرى أيضًا.

حلقة الحدث: نظرة عامة مختصرة
جافا سكريبت هي لغة مفردة، مما يعني أنها يمكنها تنفيذ جزء واحد فقط من التعليمات البرمجية في كل مرة. على الرغم من ذلك، تسمح حلقة الأحداث لجافا سكريبت بتنفيذ عمليات غير محظورة. ويحقق ذلك عن طريق إلغاء تحميل المهام مثل المؤقتات أو طلبات الشبكة أو عمليات الإدخال/الإخراج إلى المتصفح أو واجهة Node.js API. بمجرد اكتمال هذه المهام، تتم إعادة وضع وظائف رد الاتصال الخاصة بها في قائمة الانتظار إلى حلقة الحدث للتنفيذ.

كيفية عمل ضبط المهلة
عند استدعاء setTimeout، فإنك تطلب من محرك JavaScript تنفيذ وظيفة بعد فترة محددة. يتم ذلك عن طريق إضافة وظيفة رد الاتصال إلى قائمة انتظار حلقة الحدث. ومع ذلك، فإن التأخير المحدد هو الحد الأدنى من الوقت الذي يجب أن ينتظره المحرك قبل إضافة رد الاتصال إلى قائمة الانتظار، وليس وقت التنفيذ المضمون. وإليك كيفية العمل بالتفصيل:

1. الاستدعاء الأولي : عندما يتم استدعاء setTimeout مع وظيفة رد اتصال وتأخير، يقوم محرك JavaScript بتسجيل ذلك في بيئة Web API التي يوفرها المتصفح أو Node.js.

2. المؤقت: تبدأ واجهة برمجة تطبيقات الويب مؤقتًا للتأخير المحدد. خلال هذه الفترة، تستمر مكدس الاستدعاءات الرئيسي في تنفيذ أي تعليمات برمجية متزامنة تتبع استدعاء setTimeout.

3. قائمة انتظار رد الاتصال : بمجرد انتهاء المؤقت، لا تقوم Web API بتنفيذ رد الاتصال على الفور. بدلاً من ذلك، يقوم بنقل وظيفة رد الاتصال إلى قائمة انتظار الأحداث.

4. حلقة الحدث : يتم تشغيل حلقة الحدث، التي تراقب باستمرار مكدس الاستدعاءات وقائمة انتظار الأحداث. إذا كانت مكدس الاستدعاءات فارغًا، مما يعني عدم وجود مهام قيد التنفيذ حاليًا، فستأخذ حلقة الحدث الوظيفة الأولى من قائمة انتظار الأحداث وتدفعها إلى مكدس الاستدعاءات للتنفيذ.

5. التنفيذ : يتم تنفيذ وظيفة رد الاتصال أخيرًا عندما تصل إلى أعلى مكدس الاستدعاءات.

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

مشكلة الحظر
من سوء الفهم الشائع افتراض أن setTimeout سيقوم دائمًا بتنفيذ رد الاتصال بعد التأخير المحدد بالضبط. إذا تم حظر حلقة الحدث بواسطة رمز متزامن، مثل حلقة لا نهائية أو عملية حسابية طويلة الأمد، فلن يتم تنفيذ رد الاتصال حتى تصبح حلقة الحدث مجانية.

فكر في السيناريو التالي:

console.log('Program started at: '   new Date().toLocaleTimeString());

const programStartTime = Date.now();

function blockExecutionForThirtySeconds() {
  while (true) {
    const currentTime = Date.now();
    if (currentTime - programStartTime > 30000) {
      console.log('Blocking execution completed after 30 seconds...');
      return true;
    }
  }
}

console.log('Setting setTimeout for 1 second.');
setTimeout(() => {
  console.log('setTimeout executed after 30 seconds instead of 1 second: '   new Date().toLocaleTimeString());
}, 1000);

blockExecutionForThirtySeconds();

في هذا المثال، تقوم الدالة blockExecutionForThirtySeconds بحظر حلقة الحدث بحلقة لا نهائية يتم تشغيلها لمدة 30 ثانية. على الرغم من ضبط setTimeout للتنفيذ بعد ثانية واحدة، فإنه سيتم تشغيله فقط بعد اكتمال blockExecutionForThirtySeconds، أي بعد 30 ثانية.

الآثار في العالم الحقيقي
يعد فهم هذا السلوك أمرًا بالغ الأهمية للمطورين، خاصة عند كتابة تعليمات برمجية تتضمن مهلات أو فواصل زمنية أو معالجة غير متزامنة. سوء فهم كيفية عمل setTimeout يمكن أن يؤدي إلى مشكلات في الأداء وأخطاء يصعب تتبعها. إذا أجرى جزء من التعليمات البرمجية عمليات حسابية ثقيلة أو مهام طويلة الأمد وحظر حلقة الحدث، فسيتم تأخير جميع عمليات رد الاتصال setTimeout وحلول الوعد والعمليات غير المتزامنة الأخرى حتى تصبح حلقة الحدث مجانية.

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