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

[@ктоэто-е1ъ]

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

[@АндрейАндреев-п8м4ю]

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

[@ктоэто-е1ъ]

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

[@dr.margulis7773]

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

[@webelart]

😍❤️

[@YuriiKratser]

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

[@webelart]

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

[@kokochomuchacho3619]

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

[@webelart]

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

[@maxet2374]

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

[@antonasipenka2941]

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

[@webelart]

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

[@olegdegterov1595]

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

[@andTutin]

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

[@andreinebolei]

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

[@DIMAWARCRAFT3]

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

[@webelart]

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

[@eugenebrowsk3624]

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

[@MrKu39]

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

[@user-glory-of-ukraine]

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

[@svetlanazheleykina4113]

Спасибо!🙌

[@spllit9212]

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

[@webelart]

❤️

[@alsusayfulina1865]

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

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

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

[@boardsofdagestan]

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

[@webelart]

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

[@YuriiKratser]

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

[@webelart]

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

[@doge8633]

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

[@Dmitrijserg]

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

[@caveofmovies8597]

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

[@webelart]

🤗❤️

[@egoist2956]

Лайк...!

[@denisshulga7539]

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

[@webelart]

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

[@Алешка-п1х]

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

[@webelart]

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

[@Алешка-п1х]

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

[@deniskorablev2648]

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

[@webelart]

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

[@Marina-bh8iw]

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

[@ArtyomStouch]

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

[@Anonym-li8eb]

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

[@oldrazvalnuy]

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

[@NoName-zh7cc]

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

[@vladimircreator]

16:31 1000 секунд)

[@webelart]

🤦‍♀

[@СергейИжмаш]

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

[@eradzhmirzoev1330]

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

[@webelart]

Услышала. ❤

[@vladimircreator]

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

[@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 ❤

[@romanmed9035]

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

[@webelart]

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

[@romanmed9035]

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

[@webelart]

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

[@romanmed9035]

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

[@webelart]

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

[@avazshukurullayev]

Cool

[@adam-front]

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

[@fdskaasdyt]

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

[@Natahin]

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

[@Ramosok]

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

[@yurydaszukiewicz1033]

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

[@dimendroider7550]

ВОПРОС, что такое колвызов? Какой-то новомодный термин? Никогда не слышал :)

[@webelart]

@@dimendroider7550 старомодный. Callback ❤️

[@externuz]

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

[@ИванВалучев-э5р]

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

[@vladimircreator]

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

[@webelart]

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

[@vladimircreator]

@@webelart 😂

[@pavelbezdenezhnykh6793]

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

[@cheesecheesson9842]

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

[@ФорменШульц]

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

[@SportB.B]

Консоль лог ашечка

[@vlad_starkovsky]

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

[@webelart]

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

[@Dmitrijserg]

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

[@webelart]

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

[@Dmitrijserg]

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

[@Alexander-fn9kv]

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

[@webelart]

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

[@ilyapokotilo9273]

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

[@webelart]

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

[@webelart]

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

[@ilyapokotilo9273]

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

[@yurydaszukiewicz1033]

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

[@webelart]

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

[@yurydaszukiewicz1033]

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