تعلم React/

...

/

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

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

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

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

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

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

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

Press + to interact
Synchronous vs. asynchronous programming
Synchronous vs. asynchronous programming

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

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

Press + to interact
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 في آخر القائمة، لأن مدة التأخير فيها هي الأطول، وهي ٣.٥ ثانية.

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

Press + to interact
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() .

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

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

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

Press + to interact
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)
    ...