فهم جافا سكريبت المتزامنة وغير المتزامنة

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

تعمل JavaScript بمهمة واحدة في كل مرة، وذلك لأنها لغة أحادية المسار (single-threaded).

لبناء تطبيقات سريعة، يجب أن تعرف الفرق بين الكود المتزامن (synchronous) وغير المتزامن (asynchronous).

التنفيذ المتزامن (Synchronous Execution)

يتم تنفيذ الكود سطراً بسطر، حيث تنتظر كل مهمة انتهاء المهمة السابقة.

تخيل طابوراً أمام صراف آلي (ATM)؛ لا يمكن للشخص الثاني استخدام الجهاز حتى ينتهي الشخص الأول.

إذا استغرقت مهمة واحدة وقتاً طويلاً، يتوقف البرنامج بأكمله، وهذا ما يسمى بالتعطيل (blocking).

التنفيذ غير المتزامن (Asynchronous Execution)

تعمل المهام بشكل مستقل؛ حيث تبدأ JavaScript مهمة ما ثم تنتقل إلى المهمة التالية فوراً.

تخيل مطعماً؛ تطلب الطعام، ثم تتحدث مع أصدقائك أثناء الانتظار. أنت لا تجلس ساكناً وتنتظر وصول الطعام قبل القيام بأي شيء آخر.

يمنع الكود غير المتزامن تطبيقك من التجمد أثناء:

• طلبات API
• استعلامات قاعدة البيانات
• قراءة الملفات
• رفع الصور

ثلاث طرق للتعامل مع الكود غير المتزامن:

1. الـ Callbacks يتم تنفيذ دالة (function) بعد اكتمال مهمة معينة. الأمر يشبه سائق التوصيل الذي يتصل بك عند وصول طعامك.

2. الـ Promises يمثل الـ Promise نتيجة مستقبلية. يظل في حالة انتظار (pending) حتى يتم حله (resolved - نجاح) أو رفضه (rejected - خطأ).

3. الـ Async/Await تجعل هذه الطريقة الكود غير المتزامن يبدو كأنه كود متزامن، مما يسهل قراءته. تستخدم await لإيقاف تنفيذ دالة مؤقتاً دون تعطيل بقية البرنامج.

كيف يعمل الأمر في الخلفية:

تستخدم JavaScript حلقة الأحداث (Event Loop) لإدارة هذه المهام.

• Call Stack: يتتبع الدوال الحالية.
• Web APIs: تتعامل مع المهام الطويلة مثل المؤقتات (timers) أو عمليات الجلب (fetches).
• Callback Queue: يحتفظ بالمهام المكتملة.
• Event Loop: ينقل المهام من الطابور (queue) إلى المكدس (stack) عندما يكون المكدس فارغاً.

مقارنة:

المتزامن (Synchronous):

• يعمل بالتتابع
• يعطل البرنامج (Blocks)
• سهل الكتابة
• بطيء للمهام الثقيلة

غير المتزامن (Asynchronous):

• يعمل بشكل مستقل
• غير معطل (Non-blocking)
• أكثر تعقيداً
• فعال لتطبيقات الويب

إتقان هذه المفاهيم هو المفتاح لاستخدام React و Node.js و APIs الحديثة.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea