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

Разберём теорию по работе JavaScript + рассмотрим множество примеров работы синхронного и асинхронного кода.
❤️ Мой telegram канал: t.me/webelart
❤️ Мой сайт: webelart.com/
❤️ Исходники из видео: / 58097129
❤️ Ссылка на голосовалку по видео: forms.gle/ahhftfZQNN6QVEVc9
Список рекомендуемых видео:
🔥 Учимся использовать стек и очередь в JavaScript - • Учимся использовать ст...
🔥 Рекурсия и стек в JavaScript на примерах - • Рекурсия и стек в Java...
🔥 Разбор Promise и создание собственной имплементации MyPromise - • Разбор Promise и созда...
🔥 Пишем вместе throttle и debounce - • Пишем вместе throttle ...
🔥 Филипп Робертс: Что за чертовщина такая event loop? - • What the heck is the e...
Список рекомендуемых ссылок:
🍀 Concurrency model and the event loop - developer.mozilla.org/en-US/d...
🍀 Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome - habr.com/ru/post/461401/
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+ лет.

[@dr.margulis7773]

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

[@webelart]

😍❤️

[@YuriiKratser]

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

[@webelart]

Юра, спасибо за комментарий, очень приятно! ❤️

[@user-qs9sv3sx6i]

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

[@user-cm5bw7ck1y]

Пытается объяснить вещи на языке понятном уже тем людям, которым это разъяснять вообще не надо. ЗАЧЕМ🤯 Что #происходитслюдьмидура.

[@user-qs9sv3sx6i]

@@user-cm5bw7ck1y ну тут я не соглашусь, мне очень даже зашло, пусть и не сразу. А какие слова непонятны?

[@andreinebolei]

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

[@eugenebrowsk3624]

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

[@alsusayfulina1865]

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

[@Dmitrijserg]

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

[@kokochomuchacho3619]

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

[@webelart]

Есть ещё одно kzbin.info/www/bejne/oYupfXt5r5eUaZI Оно более расширенное с хорошей практикой. Рекомендую следующим ещё для большего понимания :)

[@ArtyomStouch]

Спасибо Елена, очень познавательно.

[@MrKu39]

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

[@NoName-zh7cc]

Офигенный контент, спасибо!

[@Marina-bh8iw]

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

[@razvalnuy]

Очень хорошо объясняете, благодарю

[@adam-front]

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

[@maxet2374]

оч полноценное и полезное видео

[@deniskorablev2648]

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

[@webelart]

Спасибо! 😍 Надеюсь это видео тоже зайдёт!

[@Anonym-li8eb]

Спасибо, очень полезное видео :)

[@Ramosok]

Крутой контент!!!

[@user-glory-of-ukraine]

Хорош видос, спасибо!!

[@boardsofdagestan]

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

[@webelart]

Здесь ещё надо погружаться, чтобы лучше разобраться. Поэтому пока вот такое первое приближение. Я думаю в будущем покрою эту тему более широко. Спасибо за комментарий!

[@YuriiKratser]

Лена, ты не пугайся этому комменту. Просто сейчас вопрос про ивент луп входит в топ 3. И каждый маломальский мидл является в этой теме экспертом.

[@webelart]

@@YuriiKratser Всё нормуль :))) А если тема входит в топ, то это вообще огнище! 😍

[@spllit9212]

спасибо за полезности)

[@webelart]

❤️

[@user-yx4zt2ev2g]

все круто, только единственный минус, музыка на заднем фоне громковата, пожалуйста, чуть тише, если можно сделайте в следущий раз

[@svetlanazheleykina4113]

Спасибо!🙌

[@olegdegterov1595]

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

[@andTutin]

всё не так. заблокировать поток могут микротаски, а туда колбеки из промисов попадают, queueMicrotask и requestAnimationFrame (не уверен)

[@caveofmovies8597]

спасибо, очень крутое видео

[@webelart]

🤗❤️

[@antonasipenka2941]

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

[@webelart]

Есть ещё одно видео на канале, как раз про очереди разных видов.

[@egoist2956]

Лайк...!

[@denisshulga7539]

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

[@webelart]

Есть еще одно видео kzbin.info/www/bejne/oYupfXt5r5eUaZI

[@DIMAWARCRAFT3]

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

[@webelart]

Даже не знаю, что тут ответить. Вроде бы и унизили и комплемент сказали. Знаете это как волосы у тебя конечно красивые, но уши пиздец…

[@avazshukurullayev]

Cool

[@user-uy7jy8bs2r]

Почему все видео с названием Event Loop в JavaScript описуют цикл в браузере. У Ноды цикл работает немного иначе. Отчего нету логической градации на цикл на фронте и бэке?

[@user-en6el6vc1i]

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

[@webelart]

Вот вам видео kzbin.info/www/bejne/oYupfXt5r5eUaZI

[@user-en6el6vc1i]

@@webelart то что нужно, спасибо

[@doge8633]

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

[@eradzhmirzoev1330]

музыка отвлекает

[@webelart]

Услышала. ❤

[@Maxim9575]

Доклад Джейка Арчибальда получше будет чем у Филиппа. Там уже осовременено рассказывается. По этапам, что куда. У вас чувствуется доклад Филиппа Робертса :) Учитывая что вы пробовали написать Promise на js, было бы неплохо почитать про event-loop в спецификации whatwg ну и разные гугловские статьи по модели браузера, где рассказывается рендер часть.

[@webelart]

Да его смотрела, смысле Филиппа :) Есть ещё одно видео kzbin.info/www/bejne/oYupfXt5r5eUaZI Кидайте ссылку, что за доклад?

[@Maxim9575]

​@@webelart I am writting this reply in english due with comment's system removes all my replies instantly. Before this I mentioned the report, you can easily find it if you will make search request in address URL with words: "Jake Archibald in the Loop"

[@webelart]

@@Maxim9575 ❤

[@fdskaasdyt]

А почему не выводится консоль лог на 85 строке?

[@Natahin]

он выводится. В консоли из-за 85 строки появляется Е. (То что передали в resolve попадает в .then)

[@vladimircreator]

11:10 что за склейка? Я не понял, что там дальше объяснялось.

[@webelart]

ну учить, че ты думаешь я с тобой сюсюкать тут буду что ли.

[@vladimircreator]

16:31 1000 секунд)

[@webelart]

🤦‍♀

[@yurydaszukiewicz1033]

На хабре написано в корне не так

[@catsapp]

heap - куча

[@externuz]

Если бы не "Стек колл вызовов" - было бы неплохо. А так, конечно, режет очень слух.

[@vlad_starkovsky]

Подробный разбор эвентлупа, а ни слова о микротасках, куда как раз попадает then но не попадает setTimeout

[@webelart]

Как я уже упоминала в одном из комментариев, здесь нужно ещё погружение. Изначально я не ставила для данного видео задачу покрыть всё и вся. Я здесь ещё и про V8 не упомянула, не рассказала про макро, микро таски. Не покрыла setImmediate(), process.nextTick() и т.д., которые больше к nodejs относятся и рендер по факту вскользь упомянула. Я люблю, когда изучения происходят наслоением знаний. Т.к. когда стремишься сразу и всё изучить, рассказать, показать. Обычно получается какая-то каша. Нужно время для укладки информации, потом следующая порция. Видео получилось классным и покрывает много аспектов. Тем не менее, спасибо за комментарий, я увидела, что тема микро и макро тасков интересна. ❤️

[@pavelbezdenezhnykh6793]

На середине ролика приходит осознанность, трансформируется мозг, появляется возможность вызывать дождь, огонь, ветер... Будьте осторожны!

[@cheesecheesson9842]

какой только превьюхой не заманивают на контент.

[@romanmed9035]

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

[@webelart]

Называйте функция, переменная и т.д., если вас слово штука триггерит. А вот про шок экзаменующего - это исключительно ваша фантазия.

[@romanmed9035]

@@webelart для эксперимента именно так и сделал сегодня. и это будет чудом если меня туда возьмут.

[@webelart]

@@romanmed9035 Скиньте мне минуту, неужели всё штукой называла :D Да ладно вам писимистичничать, если верно решили, должно быть хорошо. Но в любом случае, поделитесь результатом, интересно ❤

[@romanmed9035]

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

[@webelart]

@@romanmed9035 Спасибо, мне очень приятно!

[@user-rg4oj3fl1t]

немного быстро в коде бегаешь а так норм

[@catsapp]

Стойте. Сначала вы говорили, что ивент луп кладет в стек одну задачу и пока она не выполняется ничего туда не кладется. В следующем сюжете вы рассказываете, что в стек положены две функции сразу . Мда.. И как понимать? Смотрю дальше

[@webelart]

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

[@catsapp]

@@webelart 4:00 Где то тут, смотрю думаю. Речь идет о тасках. А что это.

[@webelart]

@@catsapp Проверила, в объяснение не увидела ошибок. Возможно вас смутил пример из exFn1, exFn2, то что их две в стеке. Это скорее как пример-картинка, плюс я демонстрировала стек, что функции накладываются :))) В общем здесь важна следующая тема. Мы вызываем функцию exFn1 кладем в стек и если внутри функции exFn1 есть ещё функция exFn2(допустим), то она положится выше, отработает вторая функция и только потом сможет завершиться первая, потому что вторая функция находится в первой и первая не может выполниться пока вторая не выполнится. Если функции в коде идут параллельно (рядом), то они не положатся в стек одновременно. Здесь именно смысл вложенных функций, т.е. если уже в exFn2 вызывается ещё функция exFn3, именно внутри, не рядом, то она тоже положится в стек сверху. Стало понятнее?

[@catsapp]

@@webelart Да, так понятно! Спасибо. Буду слушать дальше и думать. Если когда я буду делать курс для начинающих, постараюсь объяснить понятно как себе )) Есть такая идея. Что только начинающий может хорошо объяснить начинающему. ))

[@Dmitrijserg]

Вообще, тема очень сложная, не для новичков в JS. Разбор материала мне понравился, но очевидно, что этот ролик нужно смотреть долго, постоянно останавливаясь и перематывая, и проверяя код в конспли самому. Джуну, думаю, часа три нужно, чтобы всё здесь сказанное и показанное усвоить. Минимум.

[@webelart]

Есть ещё одно видео про event loop kzbin.info/www/bejne/oYupfXt5r5eUaZI

[@Dmitrijserg]

@@webelart спасибочки, посмотрю обязательно.

[@vladimircreator]

13:05 говоришь 1 секунду, а ставишь 0.1 секунд.

[@webelart]

да пошел ты на х*й как хочу так и монтирую 🤌

[@vladimircreator]

@@webelart 😂

[@Alexander-fn9kv]

Ты лучше расскажи как с этими знаниями, пооектами на github найте работу? Зачем учить, если работы нет

[@webelart]

Постепенно и эти знания потребуются. От себя только скажу, ищите, пробуйте и всё получится!

[@ilyapokotilo9273]

Видео для технарей, сплошная боль, столько неточностей.... Но хоть как-то объяете, на том спасибо

[@webelart]

Посмотрите вот это ещё, гораздо более точно и подробнее там объясняю kzbin.info/www/bejne/oYupfXt5r5eUaZI

[@webelart]

Успехов вам в изучении ❤

[@ilyapokotilo9273]

@@webelart Спасибо за обратную связь!))

[@yurydaszukiewicz1033]

На хабре написано в корне не так

[@webelart]

Я использовала mdn

[@yurydaszukiewicz1033]

@@webelart Это я затупил , нужно сразу было разобраться , а потом писать. Сорри