درک حلقه رویداد در جاوا اسکریپت – ساده شده است!

Summarize this content to 400 words in Persian Lang
جاوا اسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است که در سراسر جهان قدرتمند است 90% از وب سایت های موجود در وب! اما، یکی از پیچیده ترین و اشتباه ترین مفاهیم این است که چگونه حلقه رویداد کار می کند. در اینجا یک توضیح آسان برای حلقه رویداد، صف وظایف، پشته تماس، صف میکرووظیفه و APIهای وب ارائه شده است.

چه چیزی جاوا اسکریپت را خاص می کند؟

جاوا اسکریپت یک زبان تک رشته ای است. این بدان معناست که برخلاف زبان‌هایی مانند C++ یا Go که می‌توانند چندین چیز را همزمان مدیریت کنند، یک چیز را در یک زمان پردازش می‌کند. جاوا اسکریپت برای اینکه کارهای ناهمزمان مانند واکشی داده یا اجرای تایمرها بدون مشکل کار کند، از چیزی به نام حلقه رویداد!

1. Web API چیست؟

API های وب ابزارهای اضافی ارائه شده توسط مرورگر یا Node.js برای رسیدگی به وظایفی مانند ایجاد درخواست های شبکه (با استفاده از fetch، تنظیم تایمر (setTimeout، یا دسترسی به موقعیت کاربر (با استفاده از API مکان جغرافیایی). این وظایف خارج از رشته اصلی جاوا اسکریپت اجرا می شوند.

مثال:

setTimeout(() => {
console.log(“Timer done!”);
}, 2000);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا، مرورگر تایمر را کنترل می کند در حالی که جاوا اسکریپت اصلی به اجرای کدهای دیگر ادامه می دهد.

2. Task Queue چیست؟

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

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

3. Call Stack چیست؟

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

4. حلقه رویداد چیست؟

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

نمونه ای از حلقه رویداد در عمل

setTimeout(() => {
console.log(“2000ms”);
}, 2000);

setTimeout(() => {
console.log(“100ms”);
}, 100);

console.log(“End”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا چه اتفاقی می افتد؟بیایید آن را تجزیه کنیم:

“End” بلافاصله ثبت می شود زیرا همزمان است و در پشته تماس اجرا می شود.
این setTimeout با 100ms توسط Web API مدیریت می شود. بعد از 100ms، پاسخ تماس آن به سمت صف وظیفه.
این setTimeout با 2000ms همین کار را انجام می دهد، اما تماس برگشتی آن به سمت صف وظیفه بعد از 2000ms.
این حلقه رویداد حرکت می کند 100ms پاسخ تماس به پشته تماس اول، سپس 2000ms پاسخ به تماس

5. صف Microtask چیست؟

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

مثال Microtask با Promise

console.log(“Start”);

setTimeout(() => {
console.log(“Timeout”);
}, 0);

Promise.resolve().then(() => {
console.log(“Promise”);
});

console.log(“End”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا چه اتفاقی می افتد؟

“Start” بلافاصله ثبت می شود.
این setTimeout پاسخ تماس در قرار می گیرد صف وظیفه.
این Promise وضوح در قرار داده شده است صف microtask.

“End” ثبت شده است.
حلقه رویداد را بررسی می کند صف microtask، اجرا می کند Promise پاسخ به تماس
در نهایت، صف وظیفه پردازش می کند setTimeout پاسخ به تماس

خروجی:

Start
End
Promise
Timeout

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بازنمایی بصری

بسته بندی آن همه

در اینجا نحوه هماهنگی همه چیز با هم آمده است:

API های وب کارهای ناهمگام مانند تایمرهای خارج از رشته اصلی را مدیریت کنید.

حلقه رویداد وظایف را از صف وظایف یا صف Microtask به پشته تماس بگیرید.

وظایف خرد (مانند وعده‌ها) ابتدا، قبل از انجام وظایف در بخش صف وظایف.

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Start
End
Promise
Timeout