همه چیز در مورد Event loop (حلقه رویداد) در Javascript



visibility  
mode_comment   ۰

همه چیز در مورد Event loop (حلقه رویداد) در Javascript

در این مطلب میخوایم یکی از مباحث پیشرفته Javascript که Event Loop یا اصطلاحا حلقه رویداد نامیده میشه رو با هم بررسی کنیم و ببینیم که Javascript چطور بصورت Asynchronous کار میکنه و بصورت مفهومی اون رو یاد بگیریم.

اگر در زمینه طراحی وب کار کرده باشید، حتما با زبان Javascript آشنایی دارید چون نقش بسیار مهمی رو ایفا میکنه.

بخاطر ابزارها، کتابخانه ها، فریم ورک ها و دیگر امکاناتی که به واسطه وجود Javascript فراهم شده و کار توسعه طراحان وب رو به مراتب ساده‌تر از گذشته کرده است، تعداد زیادی از برنامه‌نویسان بدون اینکه اطلاعات عمیقی از زبان برنامه نویسی Javascript داشته باشند، اقدام به ساخت اپلیکیشن و برنامه‌های مورد نظر خودشون میکنن.

کار با Javascript به نظر ساده میاد ولی در واقع میشه Javascript رو یکی از پیچیده‌ترین زبانهای برنامه‌نویسی دانست و به همین خاطر خیلی از افراد تمایلی برای یادگیری پس‌زمینه اون ندارند و کارهاشون رو به هر نحوی که هست پیش میبرن و از یادگیری جاهای سخت و پیچیده این زبان خودداری میکنن.

درسته که در بعضی از زمینه‌ها اگر خیلی به Javascript هم تسلط نداشته باشید، قادر به ساخت برنامه مورد نظرتون میشید ولی اگر جزئیات این زبان رو به خوبی یاد بگیرید، بی‌شک سودهای زیادی خواهید کرد.

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

Event loop چیست؟

به احتمال زیاد اینکه Javascript یک زبان Single thread هست رو شنیدید. علاوه بر اون ممکنه اصطلاحات Call stack و Event queue رو نیز شنیده باشید. بیشتر افراد از اینکه Event loop به Javascript اجازه میده تا از قدرت Callback و Promise استفاده بکنه، اطلاع دارن ولی این همه ماجرا نیست و چیزای زیاد دیگه‌ای نیز در پشت‌صحنه وجود دارد.

خب بهتره که بریم سر اصل مطلب و بصورت خلاصه ببینیم که کدهای Javascript چطور اجرا میشن.Event loop javascript

تصویر بالا نحوه کارکرد Event loop بصورت خلاصه نشون داده شده است. در ادامه با سون لرن همراه باشید تا با جزئیات موارد مشخص شده در تصویر بالا بیشتر آشنا بشید.

Call stack

Javascript فقط یک Stack داره و کارش اینه که مشخص میکنه نوبت کدام تابع برای اجرا شدن هست و همچنین مشخص هست که چه تابعی بعد از تابع فعلی اجرا خواهد شد. به احتمال زیاد تا حالا زیاد در دنیای واقعی با Stack کار کردید:Call stack

تصویر بالا یک Stack یا پشته هست که در هر لحظه فقط یک حلقه میتونه وارد اون بشه و بر روی دیگر حلقه‌ها قرار بگیره. همچنین برای بیرون آوردن اونا باید از حلقه بالایی شروع کنیم و یکی یکی اونا رو بیرون بیاریم و نمیتونیم حلقه‌های دیگه رو بدون اینکه حلقه‌های بالایی رو در بیارید، بیرون بیاریم.

پس همونطور که دیدید Stack یک ساختار شبیه به آرایه رو داره اما یک سری محدودیت و شرایط خاص در مورد اون وجود داره. شما میتونین فقط اعضا رو به آخر Stack اضافه کنید و تنها آخرین المنت رو در هر لحظه حذف کنید.

وقتی که یک تابع رو فراخوانی میکنید، اون تابع به Stack اضافه میشه. اگر در داخل تابع مورد نظر، یک تابع دیگر فراخوانی بشه، اون توابع به ترتیب به Stack اضافه میشه و بالای تابع اول قرار میگیرن و به همین ترتیب پیش میره تا همه توابع مورد نظر درون اون تابع به Stack اضافه بشن و نوبت اونا برای اجرا شدن مشخص بشه.

همونطور که دیدید زمانی که یک ارور در Console نمایش داده میشه، اطلاعات زیادی از نام توابع و مکانی که قرار دارن نمایش داده میشه که ساختار Stack و ترتیب فراخوانی شدن توابع رو به ما نشون میده که شما میتونین با استفاده از اون کدهای خودتون رو راحتتر Debug کنید و مشکل رو بررسی کنید.javascript stack trace

حالا بنظر شما اگر یک درخواست به سرور بدیم و یا اینکه یک Timeout رو تعریف کنیم چه اتفاقی در پس‌زمینه میوفته؟

شاید در ابتدا تصور کنید که وقتی چنین کاری رو انجام بدیم، کل مرورگر قفل میشه و منتظر میمونه تا کار مورد نظر انجام بشه و به پایان برسه و بعد از اون کار خودش رو ادامه بده و سراغ دیگر توابع بره. اما در واقعیت چیزی که اتفاق میوفته اینطور نیست و Callback queue کارها رو مدیریت میکنه و انجام میده.

Callback queue و جدول رویدادها

هر بار که از setTimeout یا هر عملیات Async دیگری استفاده میکنید، اون عملیات به جدول رویدادها یا Event table یا Web APIs اضافه میشه. این ساختار مشخص میکنه که یک تابع خاص باید بعد از یک رویداد خاص اجرا بشه. زمانی که اون رویداد اجرا شد (کلیک، timeout، حرکت دادن ماوس)، Callback مورد نظر مربوط به اون رویداد به Callback queue اضافه میشه و در صف قرار میگیره.

در نظر داشته باشید که Event table توابع رو اجرا نمیکنه و همچنین اونا رو به Call stack اضافه نمیکنه و تنها وظیفه‌ای که داره اینه که رابطه بین رویداد و توابع (Callback) ها رو در نظر بگیره و در زمان وقوع رویداد اونا رو به Callback queue اضافه کنه.

Event loop

در نهایت میرسیم به معروفترین عضو این مجموعه که Event loop هست. این عضو هر لحظه چک میکنه که Call stack خالی هست یا نه. میتونین به اون بصورت یک ساعت نگاه کنید که هر لحظه و بصورت مداوم خالی بودن Call stack رو چک میکنه و هر زمان که خالی شد، به Callback queue نگاه میندازه و اگر چیزی در صف وجود داشته باشه اون رو میگیره و به Call stack اضافه میکنه تا اجرا بشه. اگر هم چیزی در Callback queue قرار نداشته باشه هم اتفاقی نمیوفته و Event loop به کار خودش ادامه میده.

حالا چند مثال رو با هم بررسی میکنیم.

کد زیر رو ببینید:

اگر کد بالا رو در مرورگر اجرا کنیم بنظر شما اول first چاپ میشه یا second؟

بعضی از افراد فکر میکنن چون 0 قرار دادیم پس first زودتر چاپ میشه ولی اینطور نمیشه و در ابتدا second چاپ میشه و بعد از اون first چاپ میشه. موتور Javascript ابتدا به setTimeout میرسه و با خودش میگه خب این مورد رو در Event table قرار میدم و به ادامه کدها میرسم.

پس console.log('second') ابتدا در Call stack قرار میگیره و اجرا میشه و second در Console چاپ میشه و بعد از زمان 0 میلی‌ثانیه، console.log('first') به callback queue اضافه میشه و Event loop وقتی که Call stack خالی بشه (یعنی بعد از چاپ کردن Second در Console) اون رو به Call stack اضافه میکنه و اجرا میشه و first هم در Console چاپ میشه.

در حال حاضر در وب‌سایت سون لرن آموزش کامل جاوا اسکریپت وجود داره که میتونید تهیه کنید و لذت ببرید و علاوه بر اون در همین ماه ثبت‌نام دوره متخصص جاوا اسکریپت هم شروع میشه که توی اون تعداد زیادی از قابلیت‌های Javascript و تکنولوژی‌های مفید و مدرن دیگر آموزش داده میشه. می تونید با شرکت در این دوره به متخصص جاوا اسکریپت تبدیل بشید.

شما میتونین از این سایت استفاده کنید و ببینید که Event loop چطور کار میکنه. کدهای javascript رو در سمت چپ وارد کنید و بر روی Save + Run کلیک کنید.

نتیجه گیری

جزئیات بسیار زیادی در مورد Event loop وجود داره که میتونین اونا رو جستجو و مطالعه کنید و ما در اینجا فقط خلاصه‌ای از عملکرد اون رو برای شما توضیح دادیم. پس با دانستن Event loop و Call stack و Event table و Callback queue و ... میتونیم از نحوه اجرا شدن کدها توسط موتور Javascript بیشتر و بهتر اطلاع داشته باشیم.

اگر شما توضیحاتی در مورد Event loop دارید خوشحال میشم که با من و دیگر کاربران در میان بذارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.