Как работает Event Loop в JavaScript + примеры

Разберём теорию по работе JavaScript + рассмотрим множество примеров работы синхронного и асинхронного кода.

Список рекомендуемых видео:

Список рекомендуемых ссылок:

00:00 введение.
00:52 теория работы Event Loop
04:49 запуск кода и стек вызовов
07:44 максимальный размер стека JS
09:34 блокировка выполнения кода
11:12 асинхронный код setTimeout
18:39 гарантия выполнения кода setTimeout
19:04 асинхронный код — Promise
24:00 асинхронные колбеки
24:45 колбеки на постоянные события
26:37 синхронные колбеки
27:49 циклы
28:12 циклы с асинхронным выполнением
30:37 рендер страницы

Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈

Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (React, NodeJs, JS, CSS, HTML) и опыт в 10+ лет.

[ктоэто-еъ]

Это шедевр. Дошло не с первого раза. пересмотрел раза 3, и попутно перематывая на 2-3 минуты назад, потеряв связь. Но оно дошло. Ребятушки, всем советую.

[dr.margulis]

Одно из самых нужных, подробных и важных видео на канале. Спасибо, Елена. 👍👍👍👏

[YuriiKratser]

Лен, спасибо тебе большое! Всегда рад твоему контенту. Ты всегда затрагиваешь глубокие, сочные темы в js. Уважение тебе.

[kokochomuchacho]

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

[alsusayfulina]

Спасибо! Появилось более целостное понимание этой штуки)

[olegdegterov]

Елена спасибо за хорошее видео. По пункту 7 события, такие как обработчики событий onKlick, могут заблокировать код (в части того что прилетает в web api) т.к. они добавляются в web api после идут в macrotask queue и после по очереди в call stack. И если их очень большое количество, то события которые тоже поступают по такому пути (web api после идут в macrotask queue и после по очереди в call stack.) будут выполнены после множества onClick. Таким образом performance будет не очень)

[andreinebolei]

Очень понятно объясняете, продолжайте пожалуйста!

[antonasipenka]

Интересный видос, с интересными примерами, только хотелось бы услышать еще про макро и микро таски

[boardsofdagestan]

Не раскрыта тема микро и макротасков - промисы и, например, колбеки из таймаутов отправляются в совершенно разные очереди. Выполнение задач из микротасков имеет приоритет перед появившимися новыми задачами в макротасках.

[Marina-bhiw]

Спасибо большое за такое простое объяснение для новичков!

[Dmitrijserg]

Лен, огромный кайф смотреть твои видео. Мотивируешь и вдохновляешь.

[MrKu]

Отличное видео ! Понравилась подача столь важной и нужной темы. Еще бы добавить информацию про макро и микротаски и было бы вообще шикарно ! Спасибо !

[eugenebrowsk]

Случайно попал на канал. Очень годный контент👍
Странно что так мало подписчиков.

[DIMAWARCRAFT]

в основном мне твои виде не нравятся. Но конкретно это видео супер. Разбираешь пример и я думаю "а что будет если добавить это сюда" и следующий пример у тебя такой как я подумал и так постоянно на протяжении видео)

[adam-front]

Ну тут лайк прям однозначно 👍👍 большое спасибо

[Алешка-пх]

Хорошее видео, но хотелось бы услышать про поведение eventloop при использовании async/await, просто я не очень понимаю логику по которой весь синхронный код после await тоже попадает в очередь

[deniskorablev]

опачки, обожаю твои гайды :3, спасибо помогаешь очень

[doge]

Все что предоставляется через WEBapi - является асинхронными, поэтому использования колбека внутри document.querySelect является асинхронным.

[СеменБлэкморбаев]

Спасибо Большое за урок! Вот один момент я все же не уловил - Допустим какая то функция вызывает внутри себя SetTimeout с нулем в качестве значения таймаута - далее эта функция заканчивает свое выполнение (допустим ее другие функции не вызывали) - таким образом в момент возврата управления из этой функции СТЕК ВЫЗОВОВ у нас будет пуст - ЗНАЧИТ ЛИ ЭТО, что в данный момент движок JS будет смотреть в очередь событий и, обнаружив там callback (установленный SetTimeout(0) ), вызовет этот каллбэк, поместив его контекст в стек вызовов? Или все же движок JS сначала пройдется по всему коду до конца, выполнит его, а затем тольо обратится к ОЧЕРЕДИ СОБЫТИЙ?

[denisshulga]

Понравилось ) Только для меня теперь новая непонятка )) если есть отдельная очередь рендера, то что раньше попадает в колстек - что-то из render queue или из task queue? Или как это происходит