- بواسطة x32x01 ||
في عالم JavaScript، لازم تبقى عارف الفرق بين Synchronous و Asynchronous علشان الكود يشتغل صح وما يحصلش بطء أو مشاكل في الأداء. هنا هاشرحلك الموضوع بطريقة سهلة وبأمثلة عملية تساعدك تفهم الفرق على طول. 🚀
الناتج هيكون بالترتيب:
الناتج هيكون:
الكود مكمل تنفيذه من غير ما ينتظر انتهاء الـ fetch، وده الفرق الكبير مع الـ Sync.
الخلاصة:
لو الكود بتاعك فيه عمليات طويلة أو طلبات من الإنترنت، استخدم Async / Await أو Promises لتجنب تأخير تنفيذ باقي البرنامج.
وده بيخلي تطبيقك أسرع وتجربة المستخدم أفضل. 🌟
الكود المتزامن (Synchronous) ⏱️
الكود المتزامن بيشتغل سطر ورا سطر بالترتيب، يعني السطر اللي بعده مستني السطر اللي قبله يخلص.خصائص سريعة:
- التنفيذ صارم بالترتيب.
- أي تأخير في سطر = تأخير في كل الكود بعده.
- مناسب للعمليات السريعة والبسيطة.
أمثلة عملية:
- عمليات حسابية بسيطة:
JavaScript:
console.log("أول سطر");
console.log("تاني سطر");
console.log("ثالث سطر"); Code:
أول سطر
تاني سطر
ثالث سطر - تعديل بيانات أو طباعة نصوص بسيطة.
الكود غير المتزامن (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:
قبل جلب البيانات
بعد جلب البيانات
البيانات جاهزة! الفرق باختصار 🔑
| النوع | الطريقة | ينتظر سطر السابق؟ | مناسب ل |
|---|---|---|---|
| Sync | متزامن | نعم | عمليات سريعة، تعديل بيانات، طباعة نصوص |
| Async | غير متزامن | لا | جلب بيانات، قراءة ملفات، عمليات طويلة |
الخلاصة:
- Sync = ترتيب صارم – كل سطر يستنى اللي قبله.
- Async = مرونة – الكود يكمل وميقفش نفسه، ويرجع ينفذ الحاجة بعدين.
نصيحة عملية 👨💻
لو الكود بتاعك فيه عمليات طويلة أو طلبات من الإنترنت، استخدم Async / Await أو Promises لتجنب تأخير تنفيذ باقي البرنامج.
وده بيخلي تطبيقك أسرع وتجربة المستخدم أفضل. 🌟
التعديل الأخير: