В этой статье мы узнаем о среде выполнения JavaScript и веб-API браузера.

Прежде чем перейти к деталям, давайте еще раз вернемся к трем основным терминам:

  1. Стек вызовов: отслеживает текущую выполняющуюся программу. Стек - это структура данных, которая сначала запускает функцию ПОСЛЕДНИЙ В (ПОСЛЕДНИЙ В ПЕРВОМ ВЫХОДЕ).
  2. Очередь обратного вызова: этот контейнер предназначен для хранения всех функций обратного вызова, возвращаемых веб-API. Очередь - это структура данных, которая сначала запускает функцию FIRST IN (FIRST IN FIRST OUT).
  3. Цикл событий: он постоянно отслеживает, пуст стек вызовов или нет. Если стек пуст, он сообщает очереди обратного вызова для отправки следующей функции обратного вызова.

JS является однопоточным. Это означает, что он может выполнять только одну программу за раз. Вы когда-нибудь задумывались, если JS выполняет одну программу за раз, как мы можем получать данные с сервера и в то же время мы можем прокручивать или выполнять различные действия на нашей странице? Потому что выборка данных - это одна задача, а прокрутка - другая ...! Как это работает?

Решением указанной выше проблемы является веб-API. В каждом браузере есть среда выполнения Javascript, а в этой JRE есть веб-API.

Веб-API - это приложение, которое предоставляет различные функции для работы с DOM, использования fetch (), setTimeout () и т. Д. Когда вы регистрируете объект окна, вы можете видеть различные свойства и методы, возвращаемые им, что и есть веб-API. Веб-API работает асинхронно: означает, что ваша программа JS просит этот API выполнить некоторую работу в фоновом режиме и вернуть результат, как только эта работа будет выполнена, а в то же время JS может продолжить выполнение своих собственных заданий.

Типичный пример, иллюстрирующий вышеупомянутый момент:

console.log(1);
setTimeout(() => console.log(2),1000);
console.log(3);
//output is:
1
3
2
  1. Задание console.log (1) помещается в стек вызовов и выполняется.
  2. setTimeout принадлежит веб-API, поэтому веб-API выполняет эту работу в фоновом режиме.
  3. Стек вызовов пуст, поэтому console.log (3) помещается в стек и выполняется.
  4. Теперь, пока не выполнялась эта 3-я задача, задание setTimeout выполняется в фоновом режиме, а функция обратного вызова помещается в очередь обратного вызова.
  5. Теперь цикл событий продолжает проверять, находится ли какое-либо задание в очереди обратного вызова, если да, то проверяет, пуст ли стек вызовов. Поскольку стек вызовов теперь пуст, функция обратного вызова console.log (3) извлекается из очереди, помещается в стек и запускается.
setTimeout(() => console.log(4),0);
console.log(5);

Теперь setTimeout имеет таймаут 0 с, тогда почему сначала печатается 5, а затем 4… ?? Можете ли вы теперь рассказать о себе, прочитав вышеупомянутые пункты?

1. Хорошо, теперь снова setTimeout является частью веб-API, и веб-API будет обрабатывать это, это означает, что стек вызовов пуст.

2. Итак, console.log (5) помещается в стек и затем запускается.

3. Теперь setTimeout выполняется в фоновом режиме с использованием веб-API, а функция обратного вызова console.log (4) помещается в очередь обратного вызова.

4. Цикл событий проверяет, есть ли функция обратного вызова? ДА! Стек пуст? ДА. console.log (4) помещается в стек и выполняется.

Вот как работают вместе JS и веб-API.

Попробуйте еще примеры :)

Бонусный балл: D

Почему JS синхронный?

Ответ: Хорошо, из приведенного выше объяснения мы знаем, что стек вызовов - это тот, кто заботится о текущем выполнении. Если было несколько стеков: означает, что несколько программ могут быть загружены и выполнены одновременно. НО JS-движок имеет только один стек вызовов и поэтому работает синхронно.

Спасибо.