Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>23 янв 2019</li>

3 <li>0</li>

4 </ul>Event loop (событийные циклы) - важная часть архитектуры JavaScript. Мы попросили эксперта объяснить, как в этом разобраться.

5 vlada_maestro / shutterstock

6 Автор в сфере IT, digital, экономики и финансов. Ведёт некоммерческий проект для начинающих писателей "ЛитЦех".

7 Понимание работы event loop - неотъемлемый пункт карьерного роста middle-разработчика.

8 А сейчас о событийных циклах рассказывает Александр Кузьмин - ведущий программист с десятилетним опытом во frontend, руководитель отдела клиентской разработки компании<a>IT-Park</a>. Передаём слово эксперту.

9 У каждого языка свой подход к параллельному вычислению данных. Например, в языках типа C++ оно передаётся в отдельный поток или даже процесс, который выполняется на другой машине.

10 Александр Кузьмин

11 ведущий программист, руководитель отдела клиентской разработки компании<a>IT-Park</a>

12 Если нужно сообщить потоку что-то вроде "посчитай вот это и положи результат в базу данных, а я когда-нибудь приду за ними", мы имеем дело с асинхронными операциями.

13 Это значит, что код, который их вызвал, не ждёт завершения выполнения, а продолжает исполняться дальше. Если же мы хотим дождаться результата, у многих современных языков есть операторыasyncи awaitдля синхронизации исполняемого кода.

14 В JavaScript асинхронность - основной инструмент. Во времена до появления Node.JS он был практически единственным языком исполнения сценариев на клиенте в вебе(Internet Explorer поддерживал VB Script, но его никто не использовал). Сейчас невозможно представить интернет, где все запросы на сервер отправлялись бы с перезагрузкой страницы. Напротив, мы пришли к одностраничному вебу, в котором на стороне клиента происходит разрешение адресов страниц и отображение соответствующего контента.

15 Любые данные от сервера запрашиваются асинхронно: отправляется запрос (XMLHttpRequest или XHR), и код не ждёт его возвращения, продолжая выполняться. Когда же сервер отвечает, объект XHR получает уведомление об этом и запускает функцию обратного вызова - callback, который передали в него перед отправкой запроса.

16 Если придётся ждать, пока запрос придёт, JavaScript перестанет принимать любые события, а страница зависнет. Чтобы пользователь спокойно использовал веб-приложение, запрос выводят из текущего контекста выполнения. Операции, результата которых приходится ждать, прежде чем продолжать выполнение кода, называются блокирующими. О них - во <a>второй части</a>статьи.

17 Суть кроется в устройстве языка:

18 Если правильно использовать инструменты языка, то выполнение кода, которое происходит последовательно и в одном потоке, никак не мешает приёму событий и реакции на них - человек спокойно работает с интерфейсом, не замечая лагов, сбоев и зависаний.

19 Чтобы этот хитрый процесс слаженно работал, в JavaScript реализован механизм для управления очерёдностью исполнения кода. Поскольку это однопоточный язык, возникла необходимость "вклиниваться" в текущий контекст исполнения. Этот механизм называется event loop - событийный цикл.

20 С английского loop переводится как "петля", что отлично отражает смысл: мы имеем дело с закольцованной очередью.

21 Event loop регулирует последовательность исполнения контекстов - стек. Он формируется, когда сработало событие или была вызвана функция. Реакция на событие помещается в очередь исполнения, в event loop, который последовательно, с каждым циклом выполняет попадающий в него код. При этом привязанная к событию функция вызывается следующей после текущего контекста исполнения.

22 В JavaScript постоянно работают связанные между собой синхронная и асинхронная очереди выполнения. Синхронная - стек - формирует очередь и пробрасывает в асинхронную - event loop - вызовы функций, которые будут выполнены после текущего запланированного исполняемого контекста.

23 Чтобы данные находились в консистентном состоянии, каждая функция должна быть выполнена до конца. Это обусловлено однопоточностью JavaScript и некоторыми другими особенностями, например характерными для функциональных языков программирования замыканиями. Поэтому единственный поток представлен в виде очереди контекстов исполнения, в которой и происходит "вклинивание" функций, прошедших через цикл событий.

24 Схема цикла событий. На каждом этапе проверяется одна из его очередей. Несмотря на названия,setImmediateвыполняется внутри цикла каждую итерацию(tick),а nextTickвызывается в момент срабатывания - между этапами цикла.В JavaScript существует понятие "контекст функции". Но есть и другой термин - "контекст исполнения". Это тело функции со всеми переменными и другими функциями, которое называют "область видимости", с английского - "scope". Важно не путать понятия, это принципиально разные вещи.

25 JavaScript - интерпретируемый язык. Это значит, что любой код проходит через интерпретатор, который исполняет его построчно. Но и здесь есть нюансы.

26 Как только скрипт попадает в интерпретатор, формируются глобальный контекст и глобальная область видимости, в которой держится Variable Object, или VO - объект переменных.

27 Он формируется из переменных вида Function Declaration и атрибутов функции по следующему принципу. Интерпретатор считывает код и находит все объявления:

28 <ul><li>переменных по ключевому словуvar(constилиletв ES6 и выше);</li>

29 <li>функций, объявленных ключевым словомfunction, без присваивания.</li>

30 </ul>Это складывается в VO текущего контекста исполнения. Затем берётсяVariable Objectвнешней области видимости и к нему добавляется сформированный выше VO. Сверху он дополняется параметрами функции и их значениями на момент исполнения.

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

32 Рассмотрим скрипт:

33 var a = 10; var c = 7; function func(a, b, d) { console.log(a, b, c, d); c = a + d; } var b = 3; func(10, a, b); console.log(c);VO этого скрипта формируется:

34 <ol><li>Из переменнойa, значение которой -undefined.</li>

35 <li>Переменнойc, значение которой -undefined.</li>

36 <li>Переменнойb, значение которой -undefined.</li>

37 <li>Функцииfuncс соответствующим телом.</li>

38 </ol>Затем скрипт начнет исполняться по следующему сценарию:

39 <ol><li>В переменнуюaзапишется значение10.</li>

40 <li>В переменнуюcзапишется значение7.</li>

41 <li>В переменнуюbзапишется значение3.</li>

42 <li>Будет вызвана функцияfunc.</li>

43 <li>Создается контекст исполнения функцииfunc.</li>

44 <li>В VO контекста исполнения функцииfuncбудут записаны переменные из внешней области видимости:a, c иb, cприсвоенными значениями.</li>

45 <li>В VO контекста исполнения функцииfuncбудут созданы переменные из списка аргументов; поскольку переменныеaиbуже существуют в VO, добавлена будет только переменнаяdсо значениемundefined.</li>

46 <li>В переменнуюaVO контекста исполнения функцииfuncбудет записано значение10.</li>

47 <li>В переменнуюbVO контекста исполнения функцииfuncбудет записано значение переменнойaвнешней области видимости -10.</li>

48 <li>В переменнуюdVO контекста исполнения функцииfuncбудет записано значение переменнойbвнешней области видимости -3.</li>

49 <li>Контекст исполнения функцииfuncбудет запущен.</li>

50 <li>В консоль выведется1010 7 3.</li>

51 <li>В переменную c, находящуюся во внешней области видимости, будет записано значение13.</li>

52 <li>Контекст выполнения функцииfuncбудет завершён; VO функцииfuncбудет удалён.</li>

53 <li>В консоль выведется13.</li>

54 </ol>Теперь перепишем скрипт, добавивsetTimeoutс нулевым тайм-аутом у вызова функции:

55 var a = 10; var c = 7; function func(a, b, d) { console.log(a, b, c, d); c = a + d; } var b = 3; setTimeout(function () { func(10, a, b); }, 0); console.log(c);На первый взгляд может показаться, что ничего не изменится и функция func будет выполнена без задержки. Но это не так. На самом деле произойдёт следующее:

56 <ol><li>В переменнуюaзапишется значение10.</li>

57 <li>В переменнуюcзапишется значение7.</li>

58 <li>В переменнуюbзапишется значение3.</li>

59 <li>Функцияfuncпопадает в пул ожидания.</li>

60 <li>Создаётся контекст исполнения функцииfunc.</li>

61 <li>По истечении0миллисекунд контекст исполнения функцииfuncбудет помещён в event loop.</li>

62 <li>В консоль выведется7.</li>

63 <li>В VO контекста исполнения функцииfuncбудут записаны переменные из внешней области видимости:a, c иb, cприсвоенными значениями.</li>

64 <li>В VO контекста исполнения функцииfuncбудут созданы переменные из списка аргументов; поскольку переменныеaиbуже существуют в VO, добавлена будет только переменнаяdсо значениемundefined.</li>

65 <li>В переменную a VO контекста исполнения функцииfuncбудет записано значение10.</li>

66 <li>В переменнуюbVO контекста исполнения функцииfuncбудет записано значение переменнойaвнешней области видимости -10.</li>

67 <li>В переменнуюdVO контекста исполнения функцииfuncбудет записано значение переменнойbвнешней области видимости -3.</li>

68 <li>Контекст исполнения функцииfuncбудет запущен.</li>

69 <li>В консоль выведется1010 7 3.</li>

70 <li>В переменную c, находящуюся во внешней области видимости, будет записано значение13.</li>

71 <li>Контекст выполнения функцииfuncбудет завершён; VO функцииfuncбудет удалён.</li>

72 </ol>Всему винойsetTimeout, очевидно. Он выводит контекст исполнения функции из синхронного потока, помещая его в event loop. То же самое происходит и с регистрацией событий. Мы можем подписаться на событие при помощи функцииaddEventListener. Передавая функцию обратного вызова -callback, добавляем её в список функций, которые должны быть вызваны при срабатывании этого события.

73 Допустим, мы хотим нажатием на кнопку перекрасить её в красный цвет. Код, который это выполняет, выглядит так:

74 var button = document.querySelector(‘button’); button.addEventListener(‘click’, function (evt) { button.style.background = ‘#f00’; });Переданная функция всегда выполняется черезevent loop. При возникновении события в цикл последовательно попадут все привязанные к нему функции. Для каждой будет формироваться контекст исполнения, который будет запущен следом за текущим.

75 Если в процессе будет вызвано ещё одно событие, его коллбэки будут вставать в очередь по тому же принципу, возможно, перемежаясь с контекстами исполнения первого события.

76 Более сложный пример: есть две кнопки, первая перекрашивает фон страницы в красный цвет, а вторая - в жёлтый, но у второй перекрашивание фона завёрнуто в setTimeoutс нулевой задержкой. И мы вручную вызываем событие нажатия сначала на жёлтую кнопку, а потом - на красную.

77 var redButton = document.getElementById(‘red’); redButton.addEventListener(‘click’, function () { document.body.style.background = ‘#f00’; }); var yellowButton = document.getElementById(‘yellow’) yellowButton.addEventListener(‘click’, function () { setTimeout(function () { document.body.style.background = ‘#ff0’; }, 0); }); yellowButton.click(); redButton.click();Живой пример:

78 Что происходит в такой ситуации, исходя из того, что мы рассмотрели выше?

79 <ol><li>Вызывается событиеclickна жёлтой кнопке.</li>

80 <li>Формируется контекст исполнения для коллбэка жёлтой кнопки.</li>

81 <li>Вызывается контекст исполнения для жёлтой кнопки.</li>

82 <li>Контекст исполнения коллбэкаsetTimeoutпомещается в event loop.</li>

83 <li>Вызывается событиеclickна красной кнопке.</li>

84 <li>Формируется контекст исполнения для коллбэка красной кнопки.</li>

85 <li>Вызывается контекст исполнения для красной кнопки.</li>

86 <li>Фону страницы дается значение"#f00".</li>

87 <li>Вызывается событиеrepaintдля DOM.</li>

88 <li>Фон страницы становится красным.</li>

89 <li>Вызывается контекст исполнения коллбэкаsetTimeout.</li>

90 <li>Фону страницы назначается значение"#ff0".</li>

91 <li>Вызывается событиеrepaintдля DOM.</li>

92 <li>Фон страницы становится жёлтым.</li>

93 </ol>Обратите внимание, что исполнение коллбэков событийclickна кнопках при вызове из кода происходит сразу же, не попадая в event loop:setTimeoutс нулевой задержкой отложил перекраску фона в жёлтый, но функция сама была исполнена в момент вызова.

94 Это происходит из-за того, что события из кода не требуется выполнять асинхронно. Действительно, в такой ситуации мы находимся в предсказуемом окружении, тогда как пользовательские события могут случаться в любой момент.

95 Это приводит к теме<a>следующей</a>части: об управлении событийным циклом и тем, что будет в него попадать. Подробно рассмотрим, как грамотно формировать цепочки последовательных асинхронно вызванных контекстов вызова, уменьшая вычислительную сложность каждого из них, освобождая поток и позволяя пользовательским событиям "вклиниваться" в очередь исполнения.

96 <a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>