ما هي المزامنة
مفهوم الكود الغير متزامن
الكود الغير متزامن ( Synchronous code-a ) هو الكود الذي تتنفذ جميع أوامره بذات الترتيب الموضوعة فيه، فلا يتم الإنتقال إلى الأمر التالي إلا عندما يتم تنفيذ الأمر الحالي و بنجاح.
في المثال التالي، قمنا بتعريف دالة إسمها
ملاحظة: أمر تغيير لون الخلفية لن يتنفذ إلا بعد أن يتم إغلاق نافذة التنبيه.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Synchronous Code</h1>
<p>The background color of the page will be
changed after closing the alert dialog.</p>
<button onclick="executeCode()">Click me</button>
<script>
function executeCode() {
// هنا قمنا بإظهار نافذة تنبيه منبثقة
alert('The alert is executed first');
// هنا قمنا بتغيير لون خلفية الصفحة
document.querySelector('body').style.background = 'khaki';
}
</script>
</body>
</html>مفهوم الكود المتزامن
الكود المتزامن ( Asynchronous code-a ) هو الكود الذي يتضمن أوامر تتنفذ بشكل متوازي مع باقي الأوامر الأخرى. فمثلاً في حال استخدام مؤقت فإن الكود الذي يوضع فيه يتنفذ بعد مرور مدة معينة بغض النظر عن ما إن كان هناك كود آخر يتنفذ أم لا.
في المثال التالي، قمنا بتعريف دالة إسمها
إنتبه: لون الخلفية هذه المرة سيتغيّر قبل ظهور النافذة المنبثقة لأن مفسّر الكود لم ينتظر انتهاء المؤقت.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>Javascript Asynchronous Code</h1>
<p>The alert will be shown after the background color
of the page is changed after closing the alert dialog.</p>
<button onclick="executeCode()">Click me</button>
<script>
function executeCode() {
// هنا قمنا بإظهار نافذة تنبيه منبثقة بعد مرور ثانيتين
setTimeout(() => {
alert('The alert is executed second');
}, 2000);
// هنا قمنا بتغيير لون خلفية الصفحة
document.querySelector('body').style.background = 'khaki';
}
</script>
</body>
</html>في المثال السابق لم نجعل كل أوامر الدالة
الفرق بين الكود المتزامن و الغير متزامن
النقاط التالية توضح أهمية كتابة الكود بشكل متزامن و كيف يحل مشاكل الكود الغير متزامن.
1- التخلص من مشكلة التعليق
كتابة الكود بشكل متزامن تحتاجه بشكل أساسي عند الحاجة إلى التعامل مع السيرفر أو أي موقع يقدم خدمة ما، لأن الطلب الذي ترسله لهم قد يستغرق بعض الوقت حتى يأتي منهم الرد. بذلك تضمن أن يكون المستخدم قادر على فعل أمور أخرى ريثما يصله الرد، و بالطبع عندما يأتي الرد تقوم بعرض النتيجة له.
2- تسريع وقت التنفيذ
بالإضافة لما سبق فإن كتابة الكود بشكل متزامن يمكن أن تجعله أسرع. فمثلاً لو فرضنا أن المستخدم أراد تنفيذ عمليتين مختلفتين و كل واحدة منها تستغرق 10 ثواني حتى تكتمل فإنه يمكن إرسال الطلبين بشكل متوازي للسرفير حتى ينفذهما في ذات الوقت. بذلك يكون وقت تنفيذ العملتين هو 10 ثواني بدلاً من 20.
في الدروس القادمة سنتعلم كيفية كتابة كود متزامن بأسلوب Promise و أسلوب Async/Await.