تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة/

...

/

البرمجة غير المتزامنة في JavaScript

البرمجة غير المتزامنة في JavaScript

قم بمراجعة برمجة JavaScript غير متزامن باستخدام عمليات الاسترجاع والوعود وasync/await لإدارة الكود بشكل أفضل.

سنغطي ما يلي...

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

البرمجة غير المتزامنة

تُمكّن البرمجة غير المتزامنة جافا JavaScript من معالجة المهام دون عرقلة تنفيذ عمليات أخرى. وهذا مفيدٌ بشكل خاص للعمليات التي تستغرق وقتًا طويلاً، مثل جلب البيانات من API) أو قراءة الملفات، إذ يُحافظ على استجابة التطبيق وكفاءته.

Synchronous vs. asynchronous programming
Synchronous vs. asynchronous programming

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

لتوضيح ذلك، ضع في اعتبارك المثال التالي حيث يتم تنفيذ ثلاث مهام ذات تأخيرات مختلفة:

Javascript (babel-node-es2024)
setTimeout(() => { console.log("Step 1"); }, 2000); // Executes after 2 seconds
setTimeout(() => { console.log("Step 2"); }, 3500); // Executes after 3.5 seconds
setTimeout(() => { console.log("Step 3"); }, 1000); // Executes after 1 second

Step 3يتم تسجيله أولاً لأنه يحتوي على أقصر تأخير يبلغ ثانية واحدة.Step 1 يتبع بعد ثانيتين.Step 2 يظهر أخيرًا، حيث يتمتع بأطول فترة تأخير تصل إلى 3.5 ثانية.

إن مفتاح فهم البرمجة غير متزامن هو حلقة الحدث ، التي تدير المهام في الخلفية مع السماح خيط الرئيسي بمواصلة التشغيل.

Interaction between the call stack, web APIs, task queue, and event loop
Interaction between the call stack, web APIs, task queue, and event loop

للعمل بشكل فعال مع البرمجة غير متزامن ، من الضروري فهم مفاهيمها وآلياتها الأساسية.

المفاهيم الرئيسية

  • أحداث DOM: أحداث DOM هي إجراءات غير متزامن تُفعّلها تفاعلات المستخدم أو أحداث النظام على صفحة ويب، مثل النقر على زر أو تغيير حجم النافذة. تتولى مستمعات الأحداث هذه الإجراءات دون منع تنفيذ أي تعليمات برمجية أخرى، مما يسمح بواجهات مستخدم سريعة الاستجابة.

  • AJAX ( JavaScript وXML غير متزامنة): AJAX هي تقنية لإنشاء طلبات HTTP غير متزامن لجلب البيانات أو إرسالها إلى خادم دون إعادة تحميل صفحة الويب بالكامل. تُستخدم هذه التقنية عادةً في تطبيقات الويب الديناميكية، وتعمل من خلال واجهات برمجة تطبيقات مثلXMLHttpRequest أو البدائل الحديثة مثلfetch() .

  • مكدس النداءات: يتتبع ترتيب استدعاء وتنفيذ الدوال. عند استدعاء دوال متداخلة، يتتبع المكدس ترتيبها.

Javascript (babel-node-es2024)
function first() {
  console.log("First");
}
function second() {
  first();
  console.log("Second");
}
second();
// Output:
// First
// Second

  • واجهات برمجة تطبيقات الويب: الميزات الخلفية التي يوفرها المتصفح (مثلsetTimeout ،fetch ) التعامل مع العمليات غير متزامن خارج خيط JavaScript الرئيسية. على سبيل المثال، المتصفحsetTimeout يقوم بجدولة رد نداء دون حظر خيط الرئيسي.

Javascript (babel-node-es2024)
console.log("Before setTimeout");
setTimeout(() => console.log("Inside setTimeout"), 1000);
console.log("After setTimeout");
// Output:
// Before setTimeout
// After setTimeout
// Inside setTimeout (after 1 second)
    ...