Search⌘ K
AI Features
Home
Courses
تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة

البرمجة غير المتزامنة في 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: هي إجراءات غير متزامن تُفعَّل بتفاعلات المستخدم أو أحداث النظام على صفحة الويب، مثل النقر على زر أو تغيير حجم النافذة. تتولى مستمعات الأحداث معالجة هذه الإجراءات دون حظر تنفيذ التعليمات البرمجية الأخرى، مما يسمح بواجهات مستخدم سريعة الاستجابة.

  • AJAX ( JavaScript غير المتزامنة وXML): هي تقنية لإجراء طلبات HTTP غير متزامن لجلب أو إرسال البيانات إلى خادم دون إعادة تحميل صفحة الويب بالكامل. تُستخدم عادةً في تطبيقات الويب الديناميكية وتعمل من خلال واجهات برمجة التطبيقات (APIs) مثل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)
...