يحتوي النص الكامل على ما مجموعه 2548 كلمة ، مع وقت تعلم يقدر بـ 8 دقائق

المصدر: Pexels

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

JavaScript هي لغة برمجة مفردة. هذه الميزة تدفع المستخدمين إلى الانتظار حتى يتم تشغيل الكود بالترتيب.

ولكن في الواقع هناك طريقة لتجنب هذه المعضلة ، إنها العامل.

في هذه المقالة ، ستقدم Xiaoxin كيفية استخدام العامل.

قبل القراءة

يحتاج القراء إلى معرفة أن JavaScript هي لغة مفردة الخيوط.

ترميز متزامن

دعنا نلقي نظرة على أنماط شفرة جافا سكريبت التي قد يكون القراء على دراية بها بالفعل

let cnt = 0 ؛ for (let i = 0؛ i <  10 هـ 8 ؛ ط + = 1) { cnt + = 1 ؛ }} console.log (cnt) ؛

في الحلقة من هذا الرمز ، يتم زيادة cnt بمقدار 1 في كل مرة ، أي ما مجموعه مرات الزيادة. لا يمكن تنفيذ ملف console.log حتى نهاية الحلقة.

في وحدة تحكم متصفح Chrome ، يستغرق هذا وقتًا طويلاً.

يستغرق هذا الرمز حوالي 3 ثوانٍ.

على أي حال ، لن تتم طباعة cnt حتى نهاية الحلقة.

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

رمز غير متزامن

المصدر: Pexels

يوفر مصممو جافا سكريبت للمطورين وظائف خاصة لا تمنع تدفق البرنامج. هذه الوظائف في قائمة انتظار مختلفة عن المهام العادية. بشكل عام ، يمكن تنفيذها بعد تنفيذ جميع البرامج العادية. تسمى هذه المهام المهام غير المتزامنة.

let cnt = 0 ؛ setTimeout (() = >  { for (let i = 0؛ i <  10 هـ 8 ؛ ط + = 1) { cnt + = 1 ؛ }} console.log (cnt) ؛ }) ؛ console.log (cnt) ؛

نتيجة تشغيل هذا الرمز تختلف عن السابقة.

ولكن لا تزال بحاجة إلى الانتظار لفترة طويلة.

يتم تضمين for for هنا في setTimeout. سينتظر الرمز في setTimeout حتى تكتمل جميع المهام الشائعة قبل التنفيذ.

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

let cnt = 0 ؛ setTimeout (() = >  { for (let i = 0؛ i <  10 هـ 8 ؛ ط + = 1) { cnt + = 1 ؛ }} console.log (cnt) ؛ }) ؛ setTimeout (() = >  { console.log (cnt) ؛ }) ؛ console.log (cnt) ؛

ألق نظرة على هذا المثال ، حيث يتم استخدام setTimeout آخر ، والذي يحتوي على وظيفة لطباعة cnt على الفور. على الرغم من ذلك ، يقوم setTimeout الثاني دائمًا بتشغيل تعليمة console.log (cnt) بعد انتهاء setTimeout الأولى للحلقة. إذا كانت المهمة الواردة في setTimeout الأولى تستغرق وقتًا طويلاً ، فلن يتم تشغيل setTimeout الثانية.

لماذا ا؟ لأن Javascript لغة برمجة مفردة. توجد دالات غير متزامنة في قوائم انتظار المهام المختلفة ، ولكنها لا تزال تتبع قاعدة مؤشر ترابط واحد.

عمال

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

السماح للعامل. if ("عامل" في النافذة) { worker = عامل جديد ('file_name') ؛ }}

إنشاء نسخة عامل جديدة أمر بسيط للغاية. يقبل الأمر Worker الجديد سلسلة أو ارتباط تشعبي كمعلمة. تنسيق هذه المعلمة بشكل عام كما يلي:

عامل جديد ('/ worker.js') ؛

بعد إنشاء المثيل ، يمكنك إرسال معلومات إلى سلسلة رسائل أخرى.

worker.postMessage ("من الموضوع الرئيسي") ؛

حتى تتمكن من تلقي هذه المعلومات في مؤشر ترابط العامل.

// worker.jsthis.addEventListener ('message'، event = >  { console.log (event.data) ؛ }) ؛

تلقى العامل الرسالة بنجاح.

إذا نظرت إلى السجلات بعناية ، فستجد أن اسم الملف هو worker.js بدلاً من main.js أو app.js. هذا يدل على أن العامل قبل الرسالة السليمة.

الآن ، دع العامل يرسل رسالة إلى الخيط الرئيسي أثناء استلام الرسالة من الخيط الرئيسي.

// main.js worker.addEventListener ("message" ، event = >  { console.log (event.data) ؛ }) ؛ // worker.js this.addEventListener ('message'، event = >  { ... this.postMessage ('From Worker Thread') ؛ }) ؛

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

يمكنك الآن رؤية رسالتين.

كيف يعمل هذا الرمز؟

يمثل onMessage حدث تلقي معلومات من الطرف الآخر لمؤشر الترابط ، ويمثل postMessage حدث إرسال معلومات إلى الطرف الآخر لمؤشر الترابط.

اختبار الكود

يمكن رؤية نقطتين في هذا الاختبار.

إجمالي وقت تشغيل الحلقة For

حجب الكود

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

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

فى الختام

المصدر: Pexels

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

اترك تعليقا

دعونا نتشارك في السلع الجافة لتعلم وتطوير الذكاء الاصطناعي معًا

إذا أعيد طبعه ، يرجى ترك رسالة في الخلفية واتباع مواصفات إعادة الطباعة