Что такое Event Loop в JavaScript? Event Loop Простыми словами

[@UlbiTV]

Этот ролик устарел, более новая и подробная версия тут - kzbin.info/www/bejne/sHXPmGlqm9iEpdk

[@danisimo1826]

не доступно

[@LegoMasterteam]

слишком долго 1 час... лучше за 5 мин посмотрю)))

[@HIghtowerSever]

Не поверишь, сегодняшний день решил посвятить Event Loop. С утра с десяток видосов посмотрел. Твоя демонстрация одна из лучших. Спасибо!

[@UlbiTV]

Рад, что полезно, спасибо!)

[@crn05]

эффект накопления знаний. Вот это мой первый ролик по event loop, и я ничерта не понял. После 10-го видео на каком-нибудь другом канале напишу под другим роликом тоже самое, что это самый понятный ролик, и наконец-то я все понял))

[@АндрійГрушецький-ъ2т]

лучше обьяснение за 5 минут которое я когда либо видел хз как для новичков, но для повторения точно шикарно заходит

[@РусланДыгов-б7н]

Неужели норм объяснение, в интернете много инфы, но адекватной очень мало, автору респект и процветания !!!

[@UlbiTV]

Спасибо, дружише)

[@noname-tm]

​@@UlbiTVпочему каждое событие летит в Event loop? Event loop ждет очистки stack и только тогда берет callback из Очереди событий и помещает в Call stack.

[@ЕвгенийШаталин-с5х]

Тимур спасибо за материалы на твоем канале! Весь день оставляю ссылки на твой канал в тематических сообществах по js, сейчас мало таких материалов от практикующих программистов с реальным опытом, так сказать на боевых проектах, одни теоретики кругом) Надеюсь не бросишь канал, удачи в развитии канала!

[@UlbiTV]

Спасибо большое, не брошу, идем до победного))

[@404piano]

круто, хочется продолжения ролика про backend для начинающих

[@UlbiTV]

Будет, но скорее не как продолжение, а как усложнение)

[@alexander.gorobets]

самое краткое и лучшее объяснение ивент лупа, про которое понятно технически

[@ArtOfFun]

Офигеть, только сегодня гуглил как он работает))

[@UlbiTV]

И как, разобрался?)

[@ArtOfFun]

@@UlbiTV после твое видео точно разобрался)

[@ЯрославХарченко-ф2я]

Круто, хочеться видео про AWS + Express + Node

[@UlbiTV]

Спасибо, вероятно будет

[@magomedmakhmudov2945]

Один из лучших каналов по js который я нашёл. Спасибо за работу. Продолжай!

[@UlbiTV]

Как бальзам на душу) Спасибо!

[@RinatYouldashbaev]

Sorax, c возвращением!

[@OlhaKumanowska]

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

[@UlbiTV]

Спасибо большое, очень рад слышать)

[@programming5944]

У тебя очень хорошо получается доносить информацию, мало кто может этим похвастаться

[@UlbiTV]

Спасибо!) рад слышать

[@АлексейБойченко-п5я]

Присоединяюсь.

[@dimmjetoff9659]

У Минина понятней объяснение

[@Pan_Jan_Wroclawski]

"Старался сделать объяснение максимально простым" - и у тебя это получилось! Спасибо!

[@maxet2374]

Чел спасибо. самое понятное и наглядное из того что я видел. если бы я не был жадным тупым мудаком - за такие труды надо было б поддержать автора финансово

[@UlbiTV]

Ахахах, главное чтоб полезно было, донаты уже дело второстепенное)

[@AGM140580]

Спасибо огромное! Полезнее, чем твои обучающие видео, на KZbin я ничего не встречал.

[@timprolubnikov]

Благодарю за такое подробное объяснение. Читал много статей, но так до конца не понимал, что такое очередь, что такое event loop, что такое веб апи. Теперь все встало на свои места!:)

[@dispeltr1183]

Все супер понятно спасибо большое! Хотелось бы увидеть подробное виде про эвент луп с микро и макро задачами.

[@artemtreiko8436]

Четкий видос! И пофиг на стрелку XD Спасибо

[@OlhaKumanowska]

Слушатели ещё не изучала, а с этого видео уже поняла что это. Шикарная подача, спасибо

[@UlbiTV]

Спасибо вам! Стараюсь!

[@МариАлекса]

Отлично, первый просмотр видео меня волновало только: "да в какую же сторону двигается эта фигура: от меня или ко мне?!"

[@stacyahr8321]

Боже спасибо большое!!! До этого видео вообще не могла понять как ивент луп работает!!Спасибо!!!!

[@bigboy3085]

лучшее объяснение во всем рунете)

[@pizdatobi8787]

Всё видео сидел раздражённый из-за того что стрелка крутится не в своём направлении

[@TheProfessionalGambler]

это ж JS)

[@leonid2713]

Ахахах

[@leonid2713]

Твой никнейм, видимо, адресуется автору

[@user-pd9no5ye5g]

а еще и дергалась в какое то время и вращается вокруг смещенной оси)))

[@UlbiTV]

Монтажер из меня так себе))

[@АнтонСоколов-п1ю]

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

[@UlbiTV]

Спасибо друг, учту!)

[@therapeutic_music_for_sleep]

Как раз решила освежить в памяти event loop :) Очень доходчиво объясняете!

[@Boortwint]

В целом мне понравилось объяснение, но есть непонятные моменты. 5:15 Здесь сделан акцент на том, что благодаря зарегистрированному слушателю события event loop будет продолжать свою работу. На самом деле event loop работает всегда, даже без навешанных обработчиков события, ведь цикл отвечает не только за исполнение javascript кода, но и за перерисовку (layout, paint) вкладки браузера.

[@ipa_stor]

О, видео для выходных, спасибо, буду знакомиться:))) пс: всем приятного просмотра

[@UlbiTV]

Спасибо!)

[@sandrorekhviashvili6858]

Самое доступное объяснение из тех, что я видел.

[@ТимСлим]

Это просто праздник какой-то! (с)

[@UlbiTV]

Спасибо, Теска!)

[@falsetrue7910]

Просто слов нет, очень круто, колокольчик только на тебя и еще на одного парня стоит, каждому видео радуюсь постоянно, спасибо!!!!!!!!!!!!!!!!

[@redhook777]

Что за парень, если не секрет?

[@UlbiTV]

Спасибо вам огромное)

[@dann1kid]

кроме колокольчика на него стоит?

[@victormog]

Второй - Минин? 😉

[@ИванОкоянный-с9к]

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

[@friendlyguy7813]

Прошу про callback отдельно сделать. Лайк оставил

[@UlbiTV]

Спасибо)

[@romahana6797]

Как бы и до этого видео понимал как работает event loop но за хороший материал можно поставить лайк и написать бесполезный комментарий для пользователей но полезный для автора.

[@UlbiTV]

Очень полезный!) Спасибо!

[@ВладимирГугин-ш7щ]

UBIL TV Самое топовое объяснение)

[@UlbiTV]

Спасибо!)

[@ГульзанаКаткелдиева-ъ4ь]

Спасибо, не обратила внимание на стрелку так как очень понятно все объяснил

[@Unnamed-r8x]

Как раз про это надо было на собесе рассказывать ))

[@UlbiTV]

Получилось?)

[@Unnamed-r8x]

@@UlbiTV на 50%. Я забыл, что приоритет у промиса больше setTimeout. А так суть объяснил эвентлупа

[@mikhailstepanischev8316]

лучшее объяснение из всех что я видел,спасибо ! Event Loop.

[@UlbiTV]

Спасибо!)

[@user-pd9no5ye5g]

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

[@UlbiTV]

Спасибо) Учту!)

[@theoty-js]

благодаря этому ролику я закрепил в голове эту картинку и теперь я меня есть чёткое понимание принципа формирования порядка очереди

[@vladyslavfx3892]

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

[@ЭзамАппаева]

Вери крутооооо🤩, не перестаю вами удивляться!Сэнк ю✌🏻Чтоб лайки прибавлялись , а дизы никогда не появлялись!!!!!!!!

[@UlbiTV]

Спасибо вам за такое пожелание и за такие теплые слова!)

[@My-ym9nl]

тот случай, когда не зря за 10 минут до тех собеседования посмотрел ролик 😁

[@aleksandrzelenskiy4000]

Хорошее объяснение, но надо на паузу ставить, чтобы вникнуть однозначно

[@UlbiTV]

Да, согласен, пока монтировал - казалось что норм скорость, но по итогу получилось достаточно быстро

[@aleksandrzelenskiy4000]

@@UlbiTV Я не про скорость съёмки. Про время чтобы уложить это все в голове. А по качеству подачи материала все отлично! Рад что забрёл случайно на этот канал! Желаю процветания и побольше зрителей!

[@UlbiTV]

Спасибо вам!)

[@ОлегПетров-п4у]

Тимур, спасибо! Отличное видео про Event Loop.

[@lamer492]

Еще не смотрел, но скорее всего очередной шедевр, просьба огромная, сделать видео по тематике Async/Await, как это все работает в JS, такие основы более сложных тем JS, может быть даже какой-то проект на ванильном JS сделаешь, и более сложные реализации backend части, и спасибо за такой контент!!!!

[@UlbiTV]

Спасибо огромное!) учту! Видео по продвинутому бекенду уже в разработке))

[@buries_r]

те же промисы, но удобнее )

[@dmitriipe4kin838]

Я работаю как front-end разработчик уже пять лет, но это самое крутое и понятное объяснение по этой теме!!!!Спасибо большое!

[@programmeruz9714]

ты четко объяснил что такое Event loop

[@ИгорьПужаков-ъ4о]

Все таки визуально проще воспринимать информация, автору спасибо!

[@АлександрОстапченко-м4в]

Молодец, подача на высшем уровне

[@vitaly-]

Отличное видео. Хотелось бы видео (какого нибудь там среднего уровня) по nest js + vue 3

[@UlbiTV]

По несту готовлю видео, не для всех будет, сложный материал

[@shyma_grasious]

Это лучшая работа в мире) я про канал)

[@UlbiTV]

Стараюсь для вас!) Рад, что нравится!

[@NurFlutterDev]

На собеседование спрашивают расскажи про eventloop а я вы про циклы спрашиваете 😂😭🤧 Спасибо за ваш труд теперь буду знать 😁😁😁

[@marcelosoian]

Просто нельзя! Нельзя пройти мимо не нажав лайк этому видео! Все очень просто и понятно. Спасибо!

[@PerryCoxer]

Мне кажется сам автор event loop не смог бы так доступно и, главное, наглядно объяснить.

[@dogober3861]

Ulbi как всегда топчик) Еще отдельно почитал про микро и макрозадачи

[@travelhuevel]

Я уже миллиард статей перечитал об этом. Надеюсь, видео поможет разобраться.

[@seeyouagainpesh9819]

У Владилена Минина глянь.

[@travelhuevel]

@@seeyouagainpesh9819 глянул, 6 минут он объясняет, что асинхронный код выполняется только после синхронного. По-моему, для этого достаточно 10 секунд.

[@seeyouagainpesh9819]

@@travelhuevel С 7:50 смотри

[@travelhuevel]

@@seeyouagainpesh9819 а, в итоге он переходит в сервис, создателя которого я уже смотрел с той же темой про event loop. Вряд ли что-то новое услышу там.

[@seeyouagainpesh9819]

@@travelhuevel Хз. Мне стало понятно как работает. Потом еще задачками на асинхронность закрепил и вообще гуд.

[@Evgeny..]

я в шоке! как все понятно))) Спасибо тебе большое)) отличное видео)) Всех благ тебе))

[@romandeveloper7720]

Сними, пожалуйста, про микро и макро таски. У тебя получится лучше и понятнее всех, как всегда. Хотелось бы фундаментально в голове уложить эти темы, но нигде еще не нашел даже четких определений этих терминов.

[@-Forever-Young-]

Топ канал. Надо продвигать

[@hutoryanin]

Доступно, понянтно. Благодарю. *Л. а. й. к.*

[@UlbiTV]

Спасибо!)

[@yuryitikhonoff9631]

Контент просто огонь, так держать.

[@PetyL]

Спасибо автору за понятные объяснения сложных тем.

[@konstantinv5512]

спасибо. Четко и наглядно.

[@michaelcooper7127]

Тимур, спасибо вам за все ваши старания и великолепные объяснения! Постоянно когда что-либо забывается, возвращаюсь к вашим видео и закрепляю материал. Очень удобный и информативный формат у вас! Продолжайте в том же духе!

[@2difficult2do]

Очень круто, Тимур, у Вас талант объяснять просто и наглядно! Спасибо большое за визуализацию и то, что делитесь своими знаниями!

[@ЁАсакура-м2ц]

Получилось прям мега легко и доступно. Рекспект

[@yevhentykhonov2805]

Отличное видео! Еще бы хотелось очень, чтобы ты разобрал macro и microtask, и как их event loop обрабатывает, мне кажется это многим было бы очень полезно узнать, что Promise и setTimeout под капотом немного по разному обрабатываются

[@stangrinn]

вот вот, без микро и макро тасок видос не полный

[@Den4eg37]

Крутое обьяснение

[@UlbiTV]

Спасибо)

[@sergsergey4251]

Спасибо, успехов.

[@fuga_eth]

Всё начало видео заставлял свой мозг смотреть под разными углами на идущий треугольник

[@localixdots9698]

Спасибо за труды, очень наглядно, довольно понятно, нет лишней воды.

[@iNikelas]

Очень круто: чётко, без воды. Спасибо!

[@АлександрЧекан-к1ы]

Все очень наглядно и понятно, спасибо.

[@jorgen5462]

Ну, теперь ты просто обязан про всякие микро- макро- таски рассказать. 🤔😁

[@UlbiTV]

Про микро и макро таски прочитать 3 минуты, не знаю, что все так суету из за этого навели)

[@Proffett89]

@@UlbiTV на собесах спрашивают

[@Zyets]

@@UlbiTV наверное потому, что в жонглировании микро- и макро- тасками (а так же рендеринге) и их цикличном(Loop) выполнении и заключается работа EventLoop, а то, что на видео - объясняется работа по большей части CallStack. Содержимое не соответствует описанию.

[@mrhollownet8663]

Хорошее объяснение!

[@UlbiTV]

Спасибо!)

[@redhook777]

Ещё было бы неплохо если про промисы и микро/макротаски рассказал

[@UlbiTV]

Да, уже жалею, что не рассказал)

[@scottwalker6071]

Спасибо, это было круто💪🙏

[@shertskoff6852]

всё понятно, подписка!

[@UlbiTV]

Спасибо!)

[@disposables72]

Хорошее объяснение, но деталей мало))) Если бы я так отвечал на аттестации(а я примерно так и отвечу), то принимающий экзамен остался бы неудовлетворён. Буду копать дальше))

[@UlbiTV]

Поэтому в названии «простыми словами»)) чтоб новичкам было понятно

[@АльбертПетров-ш2и]

Спасибо. Теперь я наглядно вижу, что JavaScript - однопоточный язык программирования. Очень то, что я видел, было похоже на монгопоточность.

[@yevhenzahorniak868]

даже на х2 всё чётко понятно, спасибо

[@isaagverdiev1393]

Спасибо за видео, очень понятное объясняете!

[@DrGurgen]

Хорошое объяснение а я думал почему js однопоточный но быстрый

[@UlbiTV]

Спасибо, Гурген)

[@victormog]

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

[@UlbiTV]

Согласен!) Спасибо!

[@travelhuevel]

Нужно видео про микрозадачи и макрозадачи.

[@apatecyprusestate]

Согласен!

[@МаркКиреев-к9г]

Как всегда супер полезный контент. Спасибо!

[@UlbiTV]

Благодарю!

[@Zhekster777]

Топ, как и всегда

[@UlbiTV]

Благодарю!)

[@Виталий-м4ф9ъ]

Огромное спасибо 😊

[@saskirakosyan5268]

Great explanation with animations.

[@UlbiTV]

Благодарю!)

[@Valeryi07]

👍👍👍

[@vadimsokhatsky2748]

Кайф, как все доступно объяснил!

[@_GyG_]

Как всегда, спасибо!

[@UlbiTV]

И тебе как всегда спасибо!)

[@gomer3894]

Отличное объяснение! Спасибо за видео, очень помогло .

[@lookingforthetruth5903]

Класс

[@UlbiTV]

Спасиб)

[@victor-trumpel]

Несколько раз посмотрел видео, но не понял о чем оно... Во-первых, почему видео об Event Loop, и ни слова про микро и макро задачи? Все, что показано в видео - макрозадачи. Во-вторых "стек вызовов" в данном видео выступает то ли в роли "очереди задач", то ли в роли стека "контекстов функций"... 2:43: secondFunction() не попадает в стек. Это макрозадача - она попадает в очередь задач. Т.к. в очереди она одна, она начинает выполняться и создает свой "контекст выполнения". В этом контексте выполнения макрозадачи выполняются в штатном режиме. console.log('log3') - (макрозадача) выполняется первой т.к. в "контексте выполнения" функции secondFunction() - эта макрозадача оказалась первой. Потом firstFunction() (макрозадача) создает свой "контекст выполнения" и он уже помещается в стек выше, чем контекст выполнения firstFunction(). Но это означает только одно: если бы код был таким: ---------------------------------------- secondFunction() { console.log('logv3'); furstFunction(); console.log('logv4'); } ---------------------------------------- то в "контексте выполнения" secondFunction(), после "макрозадачи" console.log('logv3'); создастся новый "контекст выполнения" для функции firstFunction(). И контекст у firstFunction() в стеке будет выше, чем у secondFunction(). И да, вначале будет выполнятся "очередь задач" из контекста, который находится выше в стеке (тобишь контекст у firstFunction() ) В видео сказано не понятно про что. Что автор имел ввиду под словосочетанием "Стек вызовов". Может оговорка или еще что... ---------------------------------------------- По логике из видео, если функции будут вызываться например так: secondFunction(); firstFunction(); То secondFunction попадет в стек вызовов, потом firstFunction попадет в стек вызовов. И т.к. firstFunction() в стеке будет выше, то вначале будет выполняться она. НО ЭТО НЕ ТАК! Конечно же, автор видео тоже понимает, что вначале будет выполняться secondFunction(), а затем firstFunction(). Но вот новичок в JS, посмотрев данное видео, может вполне подумать иначе. Поэтому, фраза "операции выполняются с вершины стека", в разрезе видео, мне кажется не верной. С вершины стека выполняются не операции, а "очереди задач" из "контекстов функций" в случае, если происходит вызов функции внутри функции. ----------------------------------------- Танцы с бубнами при вызове setTimeout(), где что-то бегало между 3-мя очередями в видео - вообще свели меня с ума. Все что происходит с 3:13 - это макрозадачи и у них есть только одна очередь! Очередь макро задач. И то, что попало в эту очередь раньше - то и выполняется. setTimeout - добавляет колбэк в макрозадачи через время. Если пользователь вначале кликнул, а потом сработал setTimeout то очередь будет выглядеть так: ------------------------ setTimeout клик пользователя --------------------------- Тобишь, вначале в очередь встает клик пользователя, а потом setTimeout забрасывает колбэк в макрозадачи. И вначале выполняется клик пользователя, а потом setTimeout. Если setTimeout сработал раньше, то его колбэк встает в очередь макрозадач раньше, чем клик пользователя (и соответственно выполняется первее, чем клик) Вот и все! Вот статьи, на которыми я руководствовался: learn.javascript.ru/event-loop developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop Интересно, чем руководствовался автор. P.S. В комментариях к видео люди радуются, что они все прекрасно поняли, и что видео понятное. Мне вот интересно, что они поняли)? Если им так все понятно, то в каком порядке, по их мнению, сработает этот код (руководствуясь только данным видео)? setTimeout(() => alert("timeout")); Promise.resolve() .then(() => alert("promise")); alert("code");

[@vladislavmac]

Вот, наконец то нашелся нормальный человек

[@майнкрафт-к2и]

Сделай пожалуйста видео курс по material ui! Думаю многим зайдет такой курс! Совсем тяжело понять что да как. Благодарю!))

[@UlbiTV]

Учту, спасибо!)

[@Vlad-us9xt]

top!

[@UlbiTV]

Спасибо!)

[@chirkov]

Мне бы зашло видео про создание rest api на express с несколькими точками входа, с последующим деплоем

[@UlbiTV]

Учту!)

[@kalobyte]

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