Понимание WEB API, цикла событий и очереди обратного вызова.

Мы знаем, что стек вызовов — это место, где происходит выполнение всего Javascript. Если в стеке вызовов есть какая-то операция/задача, то другая операция в веб-браузере прекратит рендеринг. Например, если у вас очень большой цикл for от 1 до нескольких миллионов, то функция в стеке вызовов будет выполнять свою работу до конца цикла for, это приведет к тому, что веб-браузер перестанет отвечать, если операция займет много времени для выполнения.

Чтобы преодолеть вышеуказанные недостатки, веб-браузер представил веб-API, веб-API используются для обработки операций Javascript всякий раз, когда есть задача, требующая много времени для выполнения в стеке вызовов, путем реализации нескольких файлов . Метод веб-API, например,

  1. установить время ожидания,
  2. установитьИнтервал,
  3. AJAX-вызов (xmlhttprequest)

Я объясню это на примере,

function message() {
      return 'Good Morning';
}
setTimeout(function timeout() {
    console.log('Click the button!');
}, 5000);
message();

В Javascript выполнение происходит сверху вниз или построчно. Сначала интерпретатор укажет на метод сообщения, но не нашел вызываемой функции, затем он укажет на метод setTimeout, а setTimeout — это веб-API, поэтому он перейдет к веб-API из стека вызовов. И затем интерпретатор укажет на вызываемый метод message(), вызовет метод сообщения и вернет строку «Доброе утро». Здесь два раза делается запись в стек вызовов и извлекается из стека вызовов после возврата сообщения.

Между тем, в веб-API через 5 мс метод тайм-аута () веб-API отправляет в очередь обратного вызова. Очередь обратного вызова — это место, где будут находиться все всплывающие функции из веб-API, она следует структуре данных очереди, которая представляет собой FIFO (первым пришел — первым вышел), что означает, что первая функция, помещенная в очередь обратного вызова из веб-API, будет первой функцией. из вызываемой очереди в стек вызовов через цикл событий.

Цикл событий: Цикл событий постоянно проверяет стек вызовов, чтобы передать частично выполненную функцию из очереди обратного вызова в стек вызовов для дальнейшего выполнения. Для этого в цикле событий необходимо подтвердить, что в стеке вызовов нет активной запущенной функции, и он должен быть пустым.

Даже если вы установите для функции Timeout значение 0 мс, то в конце концов она также выполнит метод timeout().

Вывод:

Циклический процесс от стека вызовов к веб-API, от веб-API к очереди обратного вызова и от очереди обратного вызова к стеку вызовов через цикл событий — это полный процесс, как Javascript даже работает внутри веб-браузера.