История между циклами событий и Javascript, как это работает?

JavaScript является однопоточным, что означает, что он не может использовать преимущества многопоточности, которые мы получаем с JAVA, C#, Python и т. д. Нам не предоставляется возможность запускать несколько процессов одновременно, вместо этого мы получаем один поток для запуска всех наших процессов.

Javascript — это однопоточный язык. Это означает, что у него есть один стек вызовов и одна куча памяти. Как и ожидалось, он выполняет код по порядку и должен завершить выполнение фрагмента кода, прежде чем переходить к следующему. Это синхронно, но иногда это может быть вредно. Например, если функция требует некоторого времени для выполнения или должна чего-то ожидать, она тем временем все замораживает.

Хорошим примером этого является функция оповещения окна. оповещение("Привет, мир")

Вы вообще не сможете взаимодействовать с веб-страницей, пока не нажмете «ОК» и не отклоните предупреждение. Вы застряли.

Ключевые понятия цикла событий, которые необходимо понимать

1. Стек обратного вызова

2. Очередь

Стек вызовов отслеживает порядок выполнения функций.

Изображение А

function a() {
   return "a"
}function b() {
   return a()
}function c() {
   return b()
}
c()

Изображение Б

Stack 
c()
b()
a()

Например, посмотрите на два изображения прямо выше. Изображение A — это ваш код, а изображение B — стек или порядок, в котором выполняются функции. Если бы вы запускали код на картинке A, функции выполнялись бы как на картинке B, причем c() запускалась бы первой, а a() — последней.

Очередь

Очередь — это список сообщений, которые должны быть обработаны, когда придет время. Подумайте о setTimeout() и асинхронных обратных вызовах.

function a() {
   console.log("This is function a")
}function b() {
   setTimeout(function () {
     console.log('this is function b')
   }, 1000)
   a()
}function c() {
   console.log("This is function c")
   b()
}
c()

Изображение C

This is function c
This is function a
This is function b

Изображение D

Если бы код на картинке C был выполнен, вы бы получили результаты, показанные на картинке D.

Что такое циклы событий?

Цель цикла событий — просмотреть стек вызовов и очередь. Когда стек пуст, он берет первое в очереди и выполняет его. В примере, который я привел выше со ссылкой на очередь, подумайте о том, как «Это функция A» регистрируется перед «Это функция B». Это связано с тем, что setTimeout() устанавливает таймер при регистрации «Это функция B», эффективно помещая его в очередь и позволяя функции A выполняться. Затем цикл событий увидел, что стек вызовов в этом примере пуст, поместил в стек первое, что было в очереди, это была функция «В», а затем выполнил ее.