مفاهيم وتقنيات الجافاسكريبت كثيرة ولهذه اللغة كثير من الاهمية في اغلب المجالات في الوقت الراهن واستخدامها اصبح شائعا لدى الكثير من المبرمجين سواء في المواقع الالكترونية او تطبيقات سطح المكتب او الموبايل او الويب.
في عالم تطوير الويب الحديث، يعد فهم الفرق بين البرمجة المتزامنة والبرمجة الغير متزامنة في جافاسكريبت أمرًا حيويًا. استخدام كل منهما بشكل صحيح يمكن أن يحسن من أداء التطبيقات ويوفر تجربة مستخدم أفضل. يجب على المطورين اختيار النمط البرمجي الذي يتناسب مع متطلبات تطبيقاتهم ويتيح لهم التعامل بفعالية مع تحديات تطوير الويب الحديث.
التفاعل والديناميات الحديثة في تطوير الويب أصبحت لا تقتصر على الصفحات الثابتة، وظهرت الحاجة إلى التعامل مع العمليات غير المتزامنة بشكل أفضل. في عالم تطوير الويب، يلعب لغة البرمجة جافاسكريبت دورًا حيويًا، وتقديمها لنماذج متزامنة وغير متزامنة يمثل خطوة مهمة نحو تحسين أداء التطبيقات. في هذا السياق، سنستكشف الفرق بين مفهومي "synchronous" و"asynchronous" في جافاسكريبت.
دعني اشرح لك اكثر جافاسكريبت اساسها تعمل بطريقة single thread والبلوك تشين بها يعمل بطريقة synchronous اي ينفذ الكود سطرا تلو الاخر ويجب عليه انتظار كل سطر مهما كان الوقت الذي سوف يستغرقه حتى ينهيه وهذا قد يسبب الكثير من المشكال فارتكاب خطا واحد ضمن مجموعة من الاكواد بامكانه التسبب في وقف البرنامج باكمله.
Synchronous الكود المتزامن
.jpg "Synchronous الكود المتزامن")
عندما يكون الكود متزامنًا، يتم تنفيذ الأوامر بشكل تسلسلي وترتيبي، حيث يجب أن تكتمل كل عملية قبل أن تبدأ العملية التالية. في جافاسكريبت، يمكن أن يكون الاستدعاء الدال متزامنًا. على سبيل المثال:
-------------------------------------------------
function synchronousFunction() {
console.log("بداية العملية");
console.log("انتهاء العملية");
}
synchronousFunction();
console.log("التكملة");
------------------------------------------------
في هذا المثال، سيتم طباعة "بداية العملية"، ثم "انتهاء العملية"، وأخيرًا "التكملة" بترتيب واحد تلو الاخر ولا يمكن ان يسبق كود اخر بعده في الترتيب ولعل هذا سيكون محور اهتمانا في النقطة التالية وهو asynchronous.
اقرأ ايضا: ما هو إطار العمل framework في البرمجة؟ دليل شامل وممتع للمبتدئين
Asynchronous (الكود غير متزامن)
من جديد الجافاسكريبت انها الان تستطيع تنفيذ اكثر من عملية في اوقات غير متزامنة بالرغم من انها لغة single thread.
.jpg "Asynchronous (الكود غير متزامن)")
في حالة الكود غير المتزامن، يتم تشغيل الأوامر دون الانتظار لانتهاء العملية السابقة. يُستخدم ذلك بشكل رئيسي للتعامل مع العمليات الطويلة أو العمليات التي تستند إلى الاستجابة من مصادر خارجية مثل استرجاع البيانات من خوادم أو قواعد بيانات. إليك مثال:
-------------------------------------------------
function asynchronousFunction() {
console.log("بداية العملية");
setTimeout(function() {
console.log("انتهاء العملية");
}, 2000);
}
asynchronousFunction();
console.log("التكملة");
-------------------------------------------------
في هذا المثال، سيتم طباعة "بداية العملية"، ثم "التكملة"، وبعد 2 ثانية سيتم طباعة "انتهاء العملية" بدون انتظار
الاستخدامات المناسبة لتقنيات synchronous و asynchronous
Synchronous
يستخدم عندما يعتمد الترتيب الزمني على الأهمية خصوصا اذا كنت لن تعتمد على API نظرا لانه يحتاج وقتا كبيرا للتحميل لذا لن يكون خيارا مناسبا استخدام الكود المتزامن.
في العمليات التي لا تتطلب وقتًا طويلاً للانتهاء مثل التي في المتصفح.
Asynchronous
يستخدم لتجنب تجميد واجهة المستخدم خلال العمليات الطويلة وهذه التقنية مهمة جدا اذا كنت ستستخدم API الذي تحدثنا عنه لان هذه التقنية تحتاج الاتصال بالسيرفر وسرعة تنفيذ الكود البرمجي له قد يعتمد على سرعة الانترنت لدى المستخدم لذا لمنع تجمد الموقع بالكامل.
في التعامل مع الطلبات إلى الخوادم أو الوصول إلى قواعد البيانات.
اقرأ ايضا: مقدمة في البرمجة الشيئية: ما هو OOP ولماذا يهمك؟
Promises و Async/Await
لتسهيل التعامل مع البرمجة الغير متزامنة، تقدم جافاسكريبت Promises وAsync/Await. Promises تسمح بالتعامل بشكل أفضل مع العمليات الغير متزامنة، في حين يُستخدم Async/Await لجعل الشفرة تبدو أكثر وضوحًا وسهولة قراءة.
مثال على استخدام Async/Await
لاستخدام Async/Await، يمكنك استخدام الكلمة الرئيسية async مع الدالة، واستخدام await داخلها لانتظار اكتمال العمليات الغير متزامنة.
console.log("بداية");
async function delayedOperation() {
await new Promise(resolve => setTimeout(resolve, 2000));
console.log("تم تأجيل العملية");
}
delayedOperation();
console.log("نهاية");
في هذا المثال، يتم استخدام await داخل الدالة delayedOperation لانتظار اكتمال ال Promise الذي يمثل التأجيل لمدة 2 ثانية.
الاستفادة من Callbacks
في بعض الحالات، يُستخدم التعامل مع البرمجة الغير متزامنة باستخدام Callbacks، حيث يتم تمرير دالة كمعامل إلى الدالة الغير متزامنة لتنفيذها عند اكتمال العملية.
console.log("بداية");
function performAsyncOperation(callback) {
setTimeout(function() {
console.log("تم تأجيل العملية");
callback();
}, 2000);
}
performAsyncOperation(function() {
console.log("نهاية");
});
التعامل مع الأخطاء
في سياق البرمجة الغير متزامنة، تصبح إدارة الأخطاء أمرًا أكثر أهمية. يُفضل استخدام Promises أو Async/Await لتسهيل التعامل مع الأخطاء بشكل فعّال ومنظم. يمكن التعامل مع الأخطاء بشكل أسهل وأنظف باستخدام مناطق الـ "try-catch" في Async/Await.
console.log("بداية");
async function delayedOperation() {
try {
await new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("حدث خطأ")), 2000);
});
console.log("تم تأجيل العملية");
} catch (error) {
console.error("حدث خطأ: ", error.message);
}
}
delayedOperation();
console.log("نهاية");
القدرة على التعامل مع العمليات المتعددة
في بعض الحالات، قد تحتاج التطبيقات إلى التعامل مع العمليات المتعددة في وقت واحد. في هذه الحالات، يظهر البرمجة الغير متزامنة بشكل واضح، حيث يُمكن استخدام Promises مع Promise.all لتنظيم وتنسيق تنفيذ العمليات المتعددة.
console.log("بداية");
async function performMultipleOperations() {
const result = await Promise.all([
operation1(),
operation2(),
operation3()
]);
console.log("تم تنفيذ العمليات: ", result);
}
async function operation1() {
// ... عملية 1
}
async function operation2() {
// ... عملية 2
}
async function operation3() {
// ... عملية 3
}
performMultipleOperations();
console.log("نهاية");
تظهر البرمجة المتزامنة والغير متزامنة في جافاسكريبت كأساس أساسي لفهم كيفية التعامل مع عمليات البرمجة بشكل فعّال. باختيار الأسلوب المناسب واستخدام الأدوات المناسبة مثل Promises و Async/Await، يمكن للمطورين تحسين أداء تطبيقاتهم وضمان تجربة مستخدم سلسة ومرنة.
ولقد كان هذا شرحا لمفهوم synchronous و asynchronous اتمنى ان تكون قد استفدت من هذا المقال الشامل.
