Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Event Loop JS: Асинхронное программирование

Для лучшего понимания асинхронности неплохо разобраться с тем, как устроен рантайм (браузер или Node.js) JavaScript. JavaScript изначально появился в браузерах, и к нему предъявлялись особые требования, из-за которых он кардинально отличается от остальных языков программирования. Браузер работает по так называемой событийной модели. Он загружает страницу и ждёт действий от пользователя: клики, набор текста или движение мышкой. А код, загруженный на страницу, реагирует на эти события.

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

See the Pen js_asynchronous_programming_event_loop by Hexlet (@hexlet) on CodePen.

Организация асинхронного взаимодействия требует наличия событийного цикла (Event Loop). Он может быть реализован как на уровне языка в виде библиотеки, так и на уровне рантайма, как в случае с JavaScript. Упрощённо цикл событий можно представить себе так:

// Ждем событие
while (queue.waitForMessage()) {
  // Обрабатываем
  queue.processNextMessage();
}
// Возвращаемся к первому шагу

Как только появляется новое событие, оно начинает обрабатываться (тем самым обработчиком, который мы повесили на это событие). Время обработки события может быть довольно большим, но это не значит, что в этот момент браузер зависает и не даёт пользователю работать. Нет, напротив, благодаря тому, что код асинхронный, события могут (и будут) накапливаться в очереди (queue). Именно поэтому в коде выше сообщение проверяется в переменной с именем queue.

Событийный Цикл в JavaScript

Событийный цикл всегда работает в однопоточном режиме (понимание этой темы кроется в операционных системах). Это значит, что события обрабатываются строго последовательно. Причём, запуск одного события может приводить к выполнению довольно тяжёлого кода, который работает достаточно долго. Такое периодически встречается, когда страницы сайта вдруг начинают подвисать. Проверьте себя, как вы поняли предыдущие темы. Посмотрите на схему выше и подумайте - в какой момент начнёт обрабатываться следующее событие из очереди?

Правильный ответ: В тот момент, когда текущий стек вызовов опустеет. Пока текущий стек не пуст, все остальные ждут его завершения. Исключение составляют Workers, но это отдельная тема.

По теме событийного цикла существует прекрасное видео, в котором много интересных визуализаций. Крайне рекомендую его посмотреть, оно указано в дополнительных материалах.


Дополнительные материалы

  1. Как на самом деле работает асинхронность? (оригинал, на английском языке)

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
29 сентября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
29 сентября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»