الفرق بين Sync وAsync في JavaScript

x32x01
  • بواسطة x32x01 ||
  • #1
في عالم JavaScript، لازم تبقى عارف الفرق بين Synchronous و Asynchronous علشان الكود يشتغل صح وما يحصلش بطء أو مشاكل في الأداء. هنا هاشرحلك الموضوع بطريقة سهلة وبأمثلة عملية تساعدك تفهم الفرق على طول. 🚀

الكود المتزامن (Synchronous) ⏱️​

الكود المتزامن بيشتغل سطر ورا سطر بالترتيب، يعني السطر اللي بعده مستني السطر اللي قبله يخلص.

خصائص سريعة:​

  • التنفيذ صارم بالترتيب.
  • أي تأخير في سطر = تأخير في كل الكود بعده.
  • مناسب للعمليات السريعة والبسيطة.

أمثلة عملية:​

  • عمليات حسابية بسيطة:
JavaScript:
console.log("أول سطر");
console.log("تاني سطر");
console.log("ثالث سطر");
الناتج هيكون بالترتيب:
Code:
أول سطر
تاني سطر
ثالث سطر
  • تعديل بيانات أو طباعة نصوص بسيطة.
أي عملية بطيئة هنا هتأخر كل السطور اللي بعده، زي قراءة ملف كبير من القرص بدون Async.



الكود غير المتزامن (Asynchronous) ⏳​

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

بيشتغل مع:​

  • جلب بيانات من API
  • قراءة ملفات أو قواعد بيانات
  • انتظار مؤقت (setTimeout, setInterval)

الأدوات المستخدمة:​

  • Callback Functions
  • Promises
  • Async / Await

مثال عملي مع Promise:​

JavaScript:
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("البيانات جاهزة!");
    }, 2000); // انتظار 2 ثانية
  });
}

console.log("قبل جلب البيانات");

fetchData().then((data) => {
  console.log(data);
});

console.log("بعد جلب البيانات");
الناتج هيكون:
Code:
قبل جلب البيانات
بعد جلب البيانات
البيانات جاهزة!
الكود مكمل تنفيذه من غير ما ينتظر انتهاء الـ fetch، وده الفرق الكبير مع الـ Sync.



الفرق باختصار 🔑​

النوعالطريقةينتظر سطر السابق؟مناسب ل
Syncمتزامننعمعمليات سريعة، تعديل بيانات، طباعة نصوص
Asyncغير متزامنلاجلب بيانات، قراءة ملفات، عمليات طويلة

الخلاصة:
  • Sync = ترتيب صارم – كل سطر يستنى اللي قبله.
  • Async = مرونة – الكود يكمل وميقفش نفسه، ويرجع ينفذ الحاجة بعدين.

نصيحة عملية 👨‍💻​


لو الكود بتاعك فيه عمليات طويلة أو طلبات من الإنترنت، استخدم Async / Await أو Promises لتجنب تأخير تنفيذ باقي البرنامج.
وده بيخلي تطبيقك أسرع وتجربة المستخدم أفضل. 🌟
 
التعديل الأخير:

المواضيع ذات الصلة

x32x01
الردود
0
المشاهدات
147
x32x01
x32x01
x32x01
الردود
0
المشاهدات
177
x32x01
x32x01
x32x01
الردود
0
المشاهدات
258
x32x01
x32x01
x32x01
الردود
0
المشاهدات
148
x32x01
x32x01
x32x01
الردود
0
المشاهدات
880
x32x01
x32x01
الوسوم : الوسوم
api requests async await asynchronous programming call stack callback functions event loop javascript promises settimeout synchronous programming
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟

آخر المشاركات

إحصائيات المنتدى
المواضيع
2,388
المشاركات
2,601
أعضاء أكتب كود
574
أخر عضو
الياس
عودة
أعلى