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

ما هي حلقة أحداث جافا سكريبت؟

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

المكونات الرئيسية لحلقة الحدث

1. مكدس المكالمات:

مكدس الاستدعاءات عبارة عن بنية بيانات تتعقب استدعاءات الوظائف بترتيب آخر دخول يخرج أولاً (LIFO). عندما يتم استدعاء دالة، يتم إضافتها إلى المكدس. عند اكتمال تنفيذ الوظيفة، تتم إزالتها من المكدس.

2. واجهات برمجة تطبيقات الويب:

يتم توفير واجهات برمجة تطبيقات الويب بواسطة المتصفح (أو بيئة Node.js) للتعامل مع العمليات غير المتزامنة مثل setTimeout وطلبات HTTP (XMLHttpRequest وFetch API) وأحداث DOM. تعمل واجهات برمجة التطبيقات هذه خارج محرك جافا سكريبت.

3. قائمة انتظار رد الاتصال (قائمة انتظار المهام):

قائمة انتظار رد الاتصال هي بنية بيانات تحتفظ بعمليات الاسترجاعات غير المتزامنة. يتم تنفيذ عمليات الاسترجاعات هذه عندما يكون مكدس الاستدعاءات فارغًا.

4. حلقة الحدث:

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

كيف تعمل حلقة الحدث

لفهم حلقة الحدث، دعنا نستعرض مثالاً:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

console.log('End');

التنفيذ خطوة بخطوة:

1. التهيئة:

يتم دفع وظيفة console.log('Start') إلى مكدس الاستدعاءات وتنفيذها، وطباعة البداية إلى وحدة التحكم. ثم تتم إزالة الوظيفة من المكدس.

2. عملية غير متزامنة:

يتم استدعاء وظيفة setTimeout مع رد اتصال وتأخير قدره 0 مللي ثانية. يتم دفع وظيفة setTimeout إلى مكدس الاستدعاءات ثم إزالتها فورًا بعد ضبط المؤقت. يتم تمرير رد الاتصال إلى Web API.

3. استمرار:

يتم دفع وظيفة console.log('End') إلى مكدس الاستدعاءات وتنفيذها، وطباعة النهاية إلى وحدة التحكم. ثم تتم إزالة الوظيفة من المكدس.

4. تنفيذ رد الاتصال:

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

المهام الصغيرة والمهام الكبيرة

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

1. المهام الدقيقة:

تتضمن المهام الدقيقة الوعود وعمليات رد اتصال MutationObserver. لديهم أولوية أعلى ويتم تنفيذها قبل المهام الكبيرة. بعد كل مهمة كبيرة، تقوم حلقة الحدث بفحص قائمة انتظار المهام الدقيقة وتنفيذ جميع المهام الدقيقة المتاحة.

2.المهام الكبرى:

تتضمن المهام الكبيرة عمليات setTimeout وsetInterval وعمليات الإدخال/الإخراج. ويتم تنفيذها بالترتيب الذي تتم إضافتها إلى قائمة انتظار رد الاتصال.

مثال مع الوعود

فكر في المثال التالي مع الوعود:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

التنفيذ خطوة بخطوة:

1. التهيئة:

console.log('Start') يطبع البداية.
يقوم setTimeout بجدولة مهمة كبيرة مع تأخير قدره 0 مللي ثانية.
Promise.resolve().then() يقوم بجدولة مهمة صغيرة.
console.log('End') يطبع النهاية.

2. تنفيذ المهام الدقيقة:

يتم فحص قائمة انتظار المهام الدقيقة، ويتم تنفيذ رد اتصال الوعد، وطباعة الوعد.

3. تنفيذ المهام الكبيرة:

يتم تحديد قائمة انتظار المهام الكبيرة، ويتم تنفيذ رد الاتصال setTimeout، وطباعة المهلة.

أفضل الممارسات لاستخدام حلقة الأحداث

1. تجنب حظر الموضوع الرئيسي:

قم بإجراء عمليات حسابية ثقيلة في عمال الويب أو استخدم أنماطًا غير متزامنة للحفاظ على استجابة الموضوع الرئيسي.

2. استخدم الوعود وعدم المزامنة/الانتظار:

تعمل الوعود وعدم المزامنة/الانتظار على تسهيل التعامل مع العمليات غير المتزامنة وتحسين إمكانية قراءة التعليمات البرمجية.

3. فهم أولويات المهام:

كن على دراية بالاختلافات بين المهام الدقيقة والمهام الكبيرة لكتابة تعليمات برمجية أكثر كفاءة وقابلية للتنبؤ.

خاتمة

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