درک جاوااسکریپت همگام (Synchronous) و ناهمگام (Asynchronous)
جاوااسکریپت در هر لحظه فقط یک کار را انجام میدهد. دلیل این امر این است که این یک زبان تکرشتهای (single-threaded) است.
برای ساخت اپلیکیشنهای سریع، باید تفاوت بین کدهای همگام (synchronous) و ناهمگام (asynchronous) را بدانید.
اجرای همگام (Synchronous Execution)
کدها خط به خط اجرا میشوند. هر کار منتظر میماند تا کار قبلی تمام شود.
یک صف خودپرداز (ATM) را تصور کنید. نفر دوم نمیتواند از دستگاه استفاده کند تا زمانی که کار نفر اول تمام شود.
اگر یک کار زمان زیادی طول بکشد، کل برنامه متوقف میشود. به این حالت، مسدودسازی (blocking) گفته میشود.
اجرای ناهمگام (Asynchronous Execution)
کارها بهصورت مستقل اجرا میشوند. جاوااسکریپت یک کار را شروع میکند و بلافاصله به سراغ کار بعدی میرود.
یک رستوران را تصور کنید. شما غذا سفارش میدهید و در حین انتظار، با دوستانتان صحبت میکنید. شما برای انجام هر کار دیگری، فقط نمینشینید و منتظر رسیدن غذا میمانید.
کدهای ناهمگام از فریز شدن (freezing) اپلیکیشن شما در موارد زیر جلوگیری میکنند:
- درخواستهای API
- پرسوجوهای پایگاه داده (Database queries)
- خواندن فایل
- آپلود تصاویر
سه روش برای مدیریت کدهای ناهمگام:
۱. کالبکها (Callbacks) تابعی که پس از تکمیل یک کار خاص اجرا میشود. مانند این است که راننده پیک وقتی غذا میرسد، با شما تماس بگیرد.
۲. پرومیسها (Promises) یک پرومیس نشاندهنده نتیجهای در آینده است. این در حالت انتظار (pending) باقی میماند تا زمانی که یا برآورده شود (resolved/success) یا رد شود (rejected/error).
۳. Async/Await
این روش باعث میشود کدهای ناهمگام شبیه به کدهای همگام به نظر برسند. خواندن آن آسان است. شما از await استفاده میکنید تا یک تابع را بدون مسدود کردن بقیه برنامه، متوقف کنید.
نحوه عملکرد در پشت صحنه:
جاوااسکریپت از یک حلقه رویداد (Event Loop) برای مدیریت این کارها استفاده میکند.
- Call Stack: توابع فعلی شما را ردیابی میکند.
- Web APIs: کارهای طولانی مانند تایمرها یا fetchها را مدیریت میکند.
- Callback Queue: کارهای تکمیل شده را نگه میدارد.
- Event Loop: وقتی استک (stack) خالی است، کارها را از صف (queue) به استک منتقل میکند.
مقایسه:
همگام (Synchronous):
- به صورت متوالی اجرا میشود
- برنامه را مسدود میکند
- نوشتن آن ساده است
- برای کارهای سنگین کند است
ناهمگام (Asynchronous):
- به صورت مستقل اجرا میشود
- غیرمسدودکننده (Non-blocking) است
- پیچیدهتر است
- برای اپلیکیشنهای وب کارآمد است
تسلط بر این مفاهیم، کلید استفاده از React، Node.js و APIهای مدرن است.
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea