به نام خدا با عرض سلام و عرض ادب خدمت دوستان عزیز، در ادامه سری آموزش های جاوا اسکریپت این جلسه قصد داریم در رابطه با مفهوم event loop در جاوا اسکریپت صحبت کنیم. با ما همراه باشید.

event loop چیست ؟

در جاوا اسکریپت، event loop یک مکانیسم اساسی است که اجرای ناهمزمان کد را امکان پذیر می کند. این یک بخش اساسی از محیط زمان اجرای جاوا اسکریپت است که به زبان اجازه می دهد تا عملیات غیر مسدود را به طور موثر مدیریت کند. event loop مسئول مدیریت اجرای کد، مدیریت رویدادها و حفظ جریان کنترل است.

وقتی می گوییم جاوا اسکریپت single-threaded است به چه معناست؟

یعنی ترد اصلی که کد جاوا اسکریپت در آن اجرا می شود، در یک خط و در یک زمان اجرا می شود و امکان اجرای کد به صورت موازی وجود ندارد.

event loop یا حلقه های رویداد چگونه کار می کنند؟

Call Stack:جاوا اسکریپت از یک call tsack برای پیگیری تابع در حال اجرا (جایی که برنامه در حال اجرایش است) استفاده می کند.
Callback Queue: عملیات ناهمزمان، مانند عملیات I/O یا تایمرها، توسط مرورگر یا Node.js انجام می شود. هنگامی که این عملیات کامل شد، توابع مربوطه (بازخوانی) در صف برگشت قرار می گیرند.
Event Loop : حلقه رویداد به طور مداوم call stack و صف برگشت را بررسی می کند. اگر call stack خالی باشد، اولین تابع را از callback queue گرفته و برای اجرا به پشته فراخوانی پوش می کند.
Execution : تابع بالای کال استک اجرا می شود. اگر این تابع حاوی کد ناهمگام باشد، ممکن است عملیات ناهمگام بیشتری را آغاز کند.
Callback Execution: هنگامی که یک عملیات ناهمگام کامل می شود، کال بک آن در callback queue قرار می گیرد.
Repeat: حلقه رویداد این فرآیند را ادامه می‌دهد و اطمینان حاصل می‌کند که کال اسنک قبل از گرفتن تابع بعدی از صف برگشت، همیشه خالی است.

به عنوان مثال:

در این مثال، یک اسکریپت جاوا اسکریپت رفتار مسدودسازی همزمان را نشان می‌دهد. با ثبت “Beefore Delay” شروع می شود، سپس از یک تابع delayBySeconds برای ایجاد تاخیر 5 ثانیه با استفاده از یک حلقه انتظار مشغول استفاده می کند. سپس اسکریپت پس از تکمیل تاخیر 5 ثانیه‌ای، «After Delay» را ثبت می‌کند.

console.log("Before delay");

function delayBySeconds(sec) {
let start = now = Date.now()
while(now-start < (sec*1000)) {
	now = Date.now();
}
}

delayBySeconds(5);

// Executes after delay of 5 seconds
console.log("After delay");

console.log("Before delay");

function delayBySeconds(sec) {

let start = now = Date.now()

while(now-start < (sec*1000)) {

now = Date.now();

}

delayBySeconds(5);

// Executes after delay of 5 seconds

console.log("After delay");

خروجی:
Before delay
(... waits for 5 seconds)
After delay

خروجی:

Before delay

(... waits for 5 seconds)

After delay

تخصیص حافظه در جاوا اسکریپت

Heap memory

داده ها به صورت تصادفی ذخیره شده و حافظه تخصیص داده می شود.

Stack memory

حافظه به شکل پشته تخصیص داده می شود. عمدتا برای توابع استفاده می شود.

تابع call stack

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

این مثال نشان می‌دهد هر زمان که تابعی فراخوانی می‌شود، تابع چگونه به پشته می‌رود.

function LevelTwo() {
console.log("Inside Level Two!")
}

function LevelOne() {
LevelTwo()
}

function main() {
LevelOne()
}

main()

function LevelTwo() {

console.log("Inside Level Two!")

}

function LevelOne() {

LevelTwo()

}

function main() {

LevelOne()

}

main()

ترتیبی که توابع اجرا می شوند، یعنی بعد از اینکه کار یک تابع به پایان رسید، از پشته خارج می شوند، همانطور که در زیر نشان داده شده است:

Event loop

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

حلقه رویداد سری است که جاوا اسکریپت به واسطه آن این خیال را به ما می دهد که مولتی ترد است حتی اگر سینگل تردی باشد. مثال زیر عملکرد حلقه رویداد(event loop) را به خوبی نشان می دهد:

در اینجا تابع callback در صف رویداد هنوز اجرا نشده است و زمانی که ()SetTimeOut در حال اجرا است و Web API منتظر زمان خود در پشته است. هنگامی که پشته تابع خالی می شود، تابع مطابق شکل زیر بر روی پشته بارگذاری می شود:

جایی که حلقه رویداد وارد تصویر می‌شود، اولین رویداد را از صف رویداد می‌گیرد و آن را روی پشته قرار می‌دهد، از اینجا، این تابع فراخوانی توابع دیگر را در صورت وجود اجرا می کند.

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

خب دوستان عزیز به پایان مبحث event loop در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار واقع گیرد.

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 3.5]

اشتراک‌گذاری

نمایندگی تعمیرات شیائومی رشت نوشته قبل

بهترین شرکت سئو سایت در مشهد نوشته بعد

علی فرجی

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