Модель параллелизма JavaScript и цикл событий

Автор оригинала: FreeCodeCamp Community Member.

Время выполнения JavaScript является однопоточной резьбой, что означает, что он может выполнить один кусок кода одновременно. Чтобы понять модель параллелизма и петлю событий в JavaScript, мы должны сначала узнать некоторые общие термины, связанные с ним.

Стек вызова

Сначала давайте узнаем о том, что такое стек вызова.

Стек вызовов – это простая структура данных, которая записывает, где в коде мы в настоящее время. Таким образом, если мы вступаем в функцию, которая представляет собой призыв к функции, она нажата в стек вызова. Когда мы возвращаемся из функции, она выскочила из стека.

Давайте посмотрим на пример кода, чтобы понять стек вызова:

function multiply(x,y) {
   return x * y;
}

function squared(n) {
     return multiply(n,n)
  }

function printSquare(n) {
   return squared(n)
}

let numberSquared = printSquare(5);
console.log(numberSquared);

Сначала, когда код выполняет время выполнения, будет прочитать каждый из определений функций. Но когда он достигает линии, где первая функция printsquare (5) вызывается, он будет толкать эту функцию в стек вызова.

Далее эта функция будет выполняться. Перед возвратом он столкнется с другой функцией, Квадрат (n) , Таким образом, он приостановит свою текущую работу и протолкнуть эту функцию поверх существующей функции.

Он выполняет функцию (в этом случае в квадрате функция) и, наконец, она сталкивается с другой функцией Умножьте (n, n) Отказ Затем он приостанавливает свои текущие исполнения и толкает эту функцию в стек вызова. Функция умножается выполняется, и она возвращается с умноженным значением.

Наконец, в квадрате функция возвращается и выскочит со стека, а затем идет с PrintsQuare. Окончательное квадратное значение выделяется до цифровой доступной переменной.

Мы снова сталкиваемся о вызове функции (в этом случае это оператор COUSOLE.LOG ()), поэтому время выполнения толкает это в стек. Это выполняет, что при этом печатает квадратный номер на консоли.

Обратите внимание, что первая функция, которая нажата в стек перед любым из вышеуказанных кодов, является основной функцией. Во время выполнения это обозначается как «анонимная функция».

Итоги, чтобы обобщить: всякий раз, когда вызывается функция, она нажата в стек вызова, где он выполняется. Наконец, когда функция выполнена с его выполнением и возвращается неявно или явно, она будет выпущена с стека.

Стек вызовов просто записывает в каком пункте во времени какая функция выполнялась. И он отслеживает какую функцию в настоящее время выполняется.

Браузер

Теперь мы знаем от этого, что JavaScript может выполнить одну вещь за раз, но это не так с браузером. Браузер имеет свой набор API, таких как Settimeout и XMLHTTPREQUESTS, которые не указаны в среде выполнения JavaScript.

На самом деле, если вы просматриваете исходный код V8, популярное время выполнения JavaScript, которое способствует браузерам, как Google Chrome, вы не найдете никаких определений для этого. Это потому, что эти специальные веб-API существуют в среде браузера не внутри среды JavaScript. Таким образом, вы можете сказать, что эти API вводят параллелизм в смеси.

Давайте посмотрим на диаграмму, чтобы понять всю картину.

Еще некоторые термины представлены здесь, поэтому давайте пройдемся через них:

Куча : Это в основном место, где выделены объекты.

Обратный вызов очереди : Это структура данных, которая хранит все обратные вызовы. Поскольку это очередь, элементы обрабатываются на основе FIFO, которая сначала сначала.

Структура событий : Вот где все эти вещи собираются вместе. Структура событий просто проверяет стек вызовов, и если он пуст (что означает, что в стеке нет функций). Это требует старейшего обратного вызова из очереди обратного вызова и нажимает его в стек вызовов, который в конечном итоге выполняет обратный вызов.

Давайте понять это с примером кода:

console.log('hi');

setTimeout(function() {
     console.log('freecodeCamp')
},5000);

console.log('JS')

Когда первая строка выполняется, это Console.log (). Это вызов функции, что означает, что эта функция нажата в стек вызова, в котором он выполняет печать «Привет» к консоли. Наконец это возвращено и выскочит с стека.

Затем, когда время выполнения выходит на выполнение SettimeOut (), он знает, что это веб-API. Поэтому он отдает его браузеру для обработки его выполнения. Браузер запускает таймер, а затем JS Runtime STORMS STIMETIMEOUT () из стека. Это сталкивается с запуском другого Console.log (), и поэтому он нажимает это в стек вызовов, сообщение «JS» зарегистрировано в консоли, а затем он окончательно возвращается. Затем последняя Console.log () выскочит со стека. Теперь стек вызовов пуст.

Между тем, пока все это происходило на завершении таймера. Когда 5 секунд истекает, браузер проходит вперед и нажимает функцию обратного вызова в очередь обратного вызова.

Далее проверяет контур событий, если стек вызовов бесплатен или нет. Поскольку это бесплатно, требуется функция обратного вызова и снова нажимает его обратно в стек вызовов, который выполняет код внутри него.

Опять же внутри кода есть вызов Console.log (), поэтому эта функция отправляется на верхнюю часть стека, выполняемых, которые регистрируют «FreeCodeCamp» в консоль, и, наконец, возвращается. Это означает, что он выскочит со стека и, наконец, обратный вызов выступает от стека, и мы сделаем.

Для визуализации этого лучше попробуйте этот инструмент Phillip Roberts: Вербовизовый цикл события Loupe