پشت پرده ی جاوا اسکریپت! توابع asynchronous چطور کار میکنند؟

توی این مقاله بهت توضیح میدم چطور جاوااسکریپت در پشت پرده توابع asynchronous , synchronous رو هندل میکنه

سعی میکنم مقاله رو تا حد امکان مختصر و مفید بنویسم که خسته نشید خیله خب بریم سر اصل مطلب..

مفهوم Call Stack در جاوااسکریپت

وقتی توی جاوااسریپت یه سری تابع تعریف میکنیم و صداشون میکنیم این توابع به جدولی به اسم call stack فرستاده میشن تا اجرا بشن و بعد از اجرا شدن از اون جدول خارج میشن.

خب تا اینجای کار آسون بود اما یه چیزی که تو گیف بالا توجه رو جلب میکنه وجود تابع asynchronous داخل تابع respond هستش که قرار نیست کارش به همین جدول Call stack ختم بشه که جلوتر بیشتر توضیح میدم اما قبل از ورود به اون مرحله بیاید گیف بالا رو بشکافیم تا بهتر درکش کنیم.

1. تابع greet صدا زده میشه
2. این تابع میره تو call stack تا اجرا بشه
3. حالا call stack ، این تابع رو اجرا میکنه و مقدار hello رو برمیگردونه و از صف خارجش میکنه تا بعدی بیاد جلو
4. تابع respond وارد call stack میشه که دقیقا پشت سر greet صدا زده شده بود و همین مراحل بالا رو تا مرحله 3 طی میکنه.

مفهوم Web APIs ( Events table ) و Callback Queue و Event Loop در جاوااسکریپت

معرفی Web APIs یا Events Table :

ما هر فانکشن asynchronous ای داشته باشیم مثل setTimeout و Ajax و EventHandler ها به این جدول اضافه میشن، اینطوری فکر کنید که هر تابعی که باید بعد از یه مدت مشخص یا بعد از یه event خاصی مثل کلیک یا اسکرول و... انجام بشن میرن تو جدول event table یا همون web APIs و تا زمانی که زمان اجراشون برسه توی همین جدول میمونن، مثلا تا وقتی که فلان کلیک زده بشه(event handler ) یا فلان زمان تموم بشه ( timeout)، اما خب بعد از این کجا میرن؟!

معرفی Callback Queue :

همونطور که از اسمش پیداس این یه صف برای callback ها هستش و بس ! وقتی یه callback که قرار بود بعد از سه ثانیه اجرا شه زمانش فرا میرسه یا یه callback که قرار بود بعد از کلیک اجرا شه کلیکش زده میشه ، از event table خارج و به ترتیب به این صف اضافه میشه، این صف نه این هارو اجرا میکنه و نه میفرستتشون به call stack خب پس چیکارس؟

معرفی Event Loop :

این داداشمون یه واسطه بین callback queue و call stack هستش، Event loop یکسره حواسش به این دوتا هست و وظیفش انتقال callback های داخل صف callback queue به call stack هستش تا اجرا شن اما تا call stack خالی نشه ایشون callback هارو برای اجرا شدن نمیفرسته، به محض اینکه استک خالی شه ایشون میاد و اولین کال بک رو میفرسته تا اجرا شه و طبق معمول کال بک بعد از اجرا شدن مثل بقیه فانکشن ها از استک خارج میشه

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

شاید بهتر باشه اتفاقای توی گیف رو به صورت کد هم ببینید:

حالا میتونید ببینید با اینکه bar اول از همه صدا زده شده اما چون asymchronous هستش رفته توی یه صف جدا تا زمانش برسه و مابقی توابع قبل از اون صدا زده شدن ، توجه داشته باشید که حتی اگه زمان اجرای setTimeout رو روی صفر ثانیه هم بزارید بازم میمونه آخر اجرا میشه، چون در هر صورت این تابع asymchronous هستش که باعث خروجش از Call stack میشه.

خب خسته نباشی، این مقاله اینجا تموم میشه و خوشحالم که تونستی دانش برنامه نویسیت رو بیشتر توسعه بدی.

تا مقاله های بعدی خدانگهدار ?