Event Loop للمبتدئ: ليه console.log بعد setTimeout(0) بيطبع قبله

الكود الفعلي

السكربت ده 8 سطور بس، شغّله على Node 24 أو في console المتصفح:

الترتيب اللي هيطبع:

ليه؟ السطر الأول بيدخل Call Stack، يطبع، يطلع. setTimeout بيسلّم الكولباك للـ Web API، والـ API بيقول للـ Task Queue "بعد صفر مللي ثانية حطّه عندك". السطر التالت بيدخل Call Stack، يطبع، يطلع. لما Call Stack يفضى، الـ Event Loop بياخد كولباك "٢" من الطابور وينفّذه.

قياس فعلي على Node v24.5.0 وجهاز M2: المسافة بين طباعة "٣" و"٢" هي ٠.٤ مللي ثانية تقريبًا. مش صفر — لأن الـ Event Loop محتاج tick واحد على الأقل.

متى تستخدم setTimeout(0) فعلاً

• تقسيم عملية ثقيلة: لو عندك حلقة بتعالج ٥٠٠٠ صف، قسّمها على دفعات. كل دفعة setTimeout(nextBatch, 0). ده بيدّي المتصفح فرصة يرسم الواجهة بين الدفعات.
• تأجيل DOM update: أحيانًا React أو Vue محتاجين tick واحد عشان يحدّثوا الواجهة قبل ما تقرأ القيمة الجديدة.
• كسر error stack طويل: رمي خطأ من جوّه setTimeout بيخليك تشوف الـ stack من نقطة جديدة.

الـ trade-offs اللي لازم تعرفها

المكسب: الواجهة بتفضل مستجيبة، والمتصفح بيرسم frame كل ١٦ مللي ثانية بدون ما يتجمد.

الخسارة: ترتيب التنفيذ بيبقى أصعب في الـ debugging. لو حطّيت ٤ setTimeout(0) متداخلين، ترتيبهم بيتأخر تقدير ٤ ticks، يعني تأخير حقيقي ٢-٤ مللي ثانية. على ١٠٠٠ مرة، ده ٢ ثانية ضايعة.

الافتراض هنا: المثال ده مبني على JavaScript engine حديث (V8 8.x وفوق). في محركات قديمة، الحد الأدنى لـ setTimeout كان ٤ مللي ثانية، مش صفر.

متى لا تستخدم setTimeout(0)

ممنوع تستخدمه لو محتاج كولباك ينفّذ بعد microtask تانية مباشرة. Promise.resolve().then() بيتنفّذ قبل setTimeout(0) في نفس الـ tick، لأن Microtask Queue ليها أولوية أعلى من Task Queue. لو محتاج أعلى أولوية ممكنة بدون blocking، استخدم queueMicrotask() بدل setTimeout.

كمان: ممنوع تستخدمه عشان "تستنى ثانية" — مش هيستنى ثانية، هيستنى ٠ بالظبط. لو عايز انتظار حقيقي، استخدم setTimeout(fn, 1000) أو await new Promise(r => setTimeout(r, 1000)).

الخطوة التالية

افتح console المتصفح دلوقتي، الصق الكود اللي فوق، وشوف الترتيب بعينك. بعدين جرّب تضيف Promise.resolve().then(() => console.log("٤")) بين السطر التاني والتالت، وحاول تتنبأ بالترتيب قبل ما تضغط Enter. لو الترتيب اللي طلع لك مختلف عن توقعك، اعرف إنك دخلت في فرق Microtask Queue، ودي مرحلة تانية.

المصادر

• MDN Web Docs — The event loop: developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop
• HTML Living Standard — Event loops: html.spec.whatwg.org/multipage/webappapis.html#event-loops
• Node.js Docs — The Node.js Event Loop: nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick
• Jake Archibald — In the Loop (JSConf): youtube.com/watch?v=cCOL7MC4Pl0
• WHATWG — HTML Standard: Timers: html.spec.whatwg.org/multipage/timers-and-user-prompts.html