JavaScript Visualized: Event Loop

ایونت لوپ ...

یکی از مهم ترین چیزهای که هر توسعه دهنده جاوااسکپریت باید باهاش کنار بیاد، اما اولش ممکنه فهمیدن این موضوع کمی گیج کننده باشه.

اما اول از همه بریم سراغ اینکه event loop چیه و برای چی باید بهش اهمیت بدیم ؟
جاواسکریپت یک زبان single-threaded هست یعنی اینکه در هر لحظه فقط یک تسک میتونه اجرا بشه. معمولا مسئله بزرگی نیست، اما تصور کنید یه تسک شما 30 ثانیه طول بکشه تا اجرا بشه ..
اونوقت شما باید 30 ثانیه صبر کنید تا اتفاق دیگه ای رخ بده..
( جاوااسکریپت به طور پیشفرض روی مرورگر اجرا میشه و تو اون لحظه رابط کاربری یا UI گیر کرده و شما کاری نمیتونید کنید )‌ حتی گاهی از طرف مرورگر پیغام میاد که این صفحه kill یا forceStop شه، بگذریم سال 2020 هستیم و کسی حوصله این همه کند بودن نداره !

خوشبختانه، مرورگر به ما امکان دسترسی به توابع و ویژگی‌های مختلفی، مانند DOM API ،setTimeout و ... را می‌دهد که این توابع و ویژگی‌ها در قالب Web API ( خود موتور جاوااسکریپت این امکانات رو فراهم نمیکنه)، توسط مرورگر‌ها ارائه می‌شوند. توابعی مانند setTimeout امکان برنامه‌نویسی Async و non-Blocking را در جاوا اسکریپت برای ما فراهم می‌کند که در ادامه به بررسی آن می‌پردازیم.

خب قبل اینکه شروع کنم برای دوستانی که دو تا مفهوم Stack و Queue رو تو ساختمان داده آشنایی ندارن یه عکس این پایین آپلود میکنم تا یکم در جریان کار این دو قرار بگیرن در ادامه بحث اصلی بهتر آشنا میشن.

خب بریم سر اصل مطلب:
وقتی ما یک تابع رو فراخوانی میکنیم به یک چیزی اضافه میشه که ما بهش میگیم CallStack.
CallStack یکی از بخش های انجین جاوااسکریپت هست و فقط مخصوص مرورگر نیست.
کال استک یک پشته هست به این معنی که اولین چیزی واردش میشه آخرین چیزی هست که خارج میشه (First In, Last Out).وقتی یک تابع مقداری رو برمیگردونه بعدش از پشته بیرون میاد.

تابع respond به ما تابع setTimeout رو برمیگردونه. setTimeout توسط Web API در اختیار ما هست که به ما اجازه میده تسک ها رو بدون بلاک شدن ترد اصلی برنامه،به تاخیر بندازیم.
تابع callback که ما به تابع setTimeout پاس دادیم، تابع

() => {
 return &quotHey!&quot
}

رو به Web API اضافه میکنه.

درضمن تابع setTimeout و تابع respond از پشته بیرون رفتن جفتشون مقدار هاشون برگشت داده شده!

توی Web API یک تایمر تا وقتی اجرا میشود که اون زمان رو به عنوان پارامتر دوم به تابع پاس دادیم (اینجا 1000ml) هست. تابع callback بلافاصله به پشته اضافه نمیشه، در عوض به چیزی به اسم صف (Queue) اضافه میشه.

این قسمت شاید یکم گیج کننده باشه، اما به این معنی نیست که تابع callback ما به callstack اضافه نمیشه ( پس مقدار رو برمیگردونه ) اما بعد 1000 میلی ثانیه ! پس بعد 1000ms خیلی ساده به صف اضافه میشه. اما این صف هست، تابع باید منتظر نوبت خودش بمونه!
حالا این بخش، بخشی هست که منتظرش بودیم... زمانی که event loop تنها وظیفه اش رو باید انجام بده! وصل کردن صف به Callstack!

اگر صف پشته (callstack) خالی باشه، پس تمام توابع که قبلا فراخوانی شده بودن مقدارشون رو برگردوندن و از پشته (stack) خارج شدن، اولین آیتم که توی صف هست اضافه میشه به CallStack.
تو این حالت هیچ تابع دیگری فراخوان نمیشه، معنیش اینه که CallStack
تا زمانی که تابع CallBack اولین آیتم صف بود خالی بود.

تابع callback ما به callstack اضافه میشه, فراخوان میشه، و یک مقدار برگشت داده میشه، و خارج میشه از پشته (stack)

بریم مثال زیر رو ببینیم، شاید خنده دار و آسون باشه اما فقط با تکرار و تمرین با این موضوع راحت تر خواهید بود.
اگر کد زیر رو اجرا کردید سعی کنید حدس بزنید کنسول چه لاگی رو تو خروجی نمایش میده

const foo = () => console.log(&quotFirst&quot);
const bar = () => setTimeout(() => console.log(&quotSecond&quot), 500);
const baz = () => console.log(&quotThird&quot);

bar();
foo();
baz();

فهمیدید؟ بیاید سریع بفهمیم وقتی این کد در مرورگر اجرا میشه چه اتفاقی رخ میده:

• تابع ()bar رو صدا میزنیم. bar یک فانکشن setTimeout برمیگردونه.
• تابع کال بک رو که به تابع setTimeout پاس دادیم، به Web API اضافه میشه، حالا تابع setTimeout و bar از CallStack بیرون میان.
• در همین حال که تایمر تو Web API درحال اجرا هست تابع foo فراخوان میشه و اول از همه تو کنسول اجرا میشه، بعدش تابع baz فراخوان میشه و در همین حال تابع callback ما به صف (Queue) اضافه میشه.
• خروجی دوم برای تابع baz هست که Third رو نمایش میده. اینجا event loop نگاه میکنه که CallStack بعد اجرای تابع baz که مقدارش برگشت خالی باشه. بعدش تابع CallBack ما که تو صف بود به CallStack ما اضافه میشه.
• آخر‌سر به عنوان خروجی سوم تو کنسول لاگ Second رو میبینیم.
  

این مقاله ترجمه شد از مقاله های Lydia hallie هست.
ازاین سایت هم برای درک بهتر این موضوع میتونید استفاده کنید.
امیدوارم تونسته باشم تو درک این موضوع کمکی به دوستداران جاوااسکریپت کرده باشم.