❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • مفهوم الكود الغير متزامن
  • مفهوم الكود المتزامن
  • الفرق بين الكود المتزامن و الغير متزامن

مفهوم الكود الغير متزامن

الكود الغير متزامن ( Synchronous Code ) هو الكود الذي تتنفذ جميع أوامره بذات الترتيب الموضوعة فيه، فلا يتم الإنتقال إلى الأمر التالي إلا عندما يتم تنفيذ الأمر الحالي و بنجاح.

كود غير متزامن

في المثال التالي، قمنا بتعريف دالة إسمها executeCode()، عند استدعاءها تظهر نافذة تنبيه منبثقة و من بعدها تقوم بتغيير لون خلفية الصفحة.
ملاحظة: أمر تغيير لون الخلفية لن يتنفذ إلا بعد أن يتم إغلاق نافذة التنبيه.

مثال

<button onclick="executeCode()">Click me</button>
<script>
// executeCode هنا قمنا بتعريف الدالة
function executeCode() {
// هنا قمنا بإظهار نافذة تنبيه منبثقة
alert('This code execute first');
// هنا قمنا بتغيير لون خلفية الصفحة
document.querySelector('body').style.background = 'khaki';
}
</script>
<button onclick="executeCode()">Click me</button> <script> // executeCode هنا قمنا بتعريف الدالة function executeCode() { // هنا قمنا بإظهار نافذة تنبيه منبثقة alert('This code execute first'); // هنا قمنا بتغيير لون خلفية الصفحة document.querySelector('body').style.background = 'khaki'; } </script>
جرب الكود

مفهوم الكود المتزامن

الكود المتزامن ( Asynchronous Code ) هو الكود الذي يتضمن أوامر تتنفذ بشكل متوازي مع باقي الأوامر الأخرى. فمثلاً في حال استخدام مؤقت فإن الكود الذي يوضع فيه يتنفذ بعد مرور مدة معينة بغض النظر عن ما إن كان هناك كود آخر يتنفذ أم لا.

كود متزامن

في المثال التالي، قمنا بتعريف دالة إسمها executeCode()، عند استدعاءها تقوم بتشغيل مؤقت مهتمه إظهار نافذة تنبيه منبثقة بعد مرور ثانيتين، و من بعدها تقوم تغيير لون خلفية الصفحة.
إنتبه: لون الخلفية هذه المرة سيتغيّر قبل ظهور النافذة المنبثقة لأن مفسّر الكود لم ينتظر انتهاء المؤقت.

مثال

<button onclick="executeCode()">Click me</button>
<script>
// executeCode هنا قمنا بتعريف الدالة
function executeCode() {
// هنا قمنا بإظهار نافذة تنبيه منبثقة بعد مرور ثانيتين
setTimeout(() => {
alert('The alert is executed second');
}, 2000);
// هنا قمنا بتغيير لون خلفية الصفحة
document.querySelector('body').style.background = 'khaki';
}
</script>
<button onclick="executeCode()">Click me</button> <script> // executeCode هنا قمنا بتعريف الدالة function executeCode() { // هنا قمنا بإظهار نافذة تنبيه منبثقة بعد مرور ثانيتين setTimeout(() => { alert('The alert is executed second'); }, 2000); // هنا قمنا بتغيير لون خلفية الصفحة document.querySelector('body').style.background = 'khaki'; } </script>
جرب الكود

في المثال السابق لم نجعل كل أوامر الدالة executeCode() متزامنة، بل فقط الأمر الموضوع بداخل المؤقت.

الفرق بين الكود المتزامن و الغير متزامن

النقاط التالية توضح أهمية كتابة الكود بشكل متزامن و كيف يحل مشاكل الكود الغير متزامن.


1- التخلص من مشكلة التعليق

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

الفرق بين الكود المتزامن و الغير متزامن

2- تسريع وقت التنفيذ

بالإضافة لما سبق فإن كتابة الكود بشكل متزامن يمكن أن تجعله أسرع. فمثلاً لو فرضنا أن المستخدم أراد تنفيذ عمليتين مختلفتين و كل واحدة منها تستغرق 10 ثواني حتى تكتمل فإنه يمكن إرسال الطلبين بشكل متوازي للسرفير حتى ينفذهما في ذات الوقت. بذلك يكون وقت تنفيذ العملتين هو 10 ثواني بدلاً من 20.

سرعة تنفيذ الكود المتزامن و الغير متزامن

في الدروس القادمة سنتعلم كيفية كتابة كود متزامن بأسلوب Promise و أسلوب Async/Await.

الدرس التالي❯ ❮الدرس السابق