Хорошая визуализация, очень помогает понять, то о чем говорится в видео 👍

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

Хороший разбор темы, если перед просмотром видео читаете комменты и думаете тратить ли время на просмотр данного ролика, из-за маленького кол-ва просмотров и подписчиков, то это лучшее разьяснение по этой теме которое я нашел на ютубе!

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

Супер! Одно из лучших объяснений которые я смотрела. Задачку решила изначально неверно. Но потом разобралась что не так. Спасибо

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

Одно из лучших разьяснений, спасибо!

Спасибо, крутая подача материала!

Очень доступное объяснение. Спасибо !

Автор, спасибо вам, вы очень хорошо объяснили! После первых минут, понял что будет понятно!

Отличная подача материала, огромное спасибо

Красавчик! Спасибо за инфу, и наглядную подачу)

start end timer1 timer3 timer2 Вроде так должно

Спасибо большое за отличную подачу таких важных тем по js!!!

Коротко и ясно. Спасибо

Спасибо автору за труд, продолжай в том же духе. Уверен если будешь дальше стараться с таким качеством контента далеко пойдешь

Отличное объяснение! Пожалуй даже лучше чем Владилен Минин объяснял Event loop.

Спасибо большое, стало понятней!

Освяжил в памяти , спасибо)

Хорошо объяснил, прям разжевал, ставлю лойс!!!!

Самое понятное объяснение. Спасибо

Спасибо! Всё понятно)

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

Спасибо, было интересно!

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

Спасибо большое, завтра у меня собес на эту тему, надеюсь поможет, наглядно и доходчиво объяснил

Как же это ах..но, чувак! Ты бог! Спасибо

Спасибо! Хорошо объяснили

Превосходная подача материала

Максимально хорошо объяснили!!!

Лучше объяснение Event Loop, спасибо!

Отличное объяснение!

отлично сделан урок!

Спасибо!

Start End Timer1 Timer3 Timer2 Второй выведется последним, так как его setTimeout будет вызван через webAPI уже в процессе выполнения колбеков с timer 1 и 3. Отличный канал. С такой подачей информации вангую автору хорошую динамику роста популярности канала через какое-то время.

Последняя задача. Вместо 'start', 'end', и 'timer', я написал 'обычный код и setTimeout'. И вывел это не во консоль, а на страницу, ответ будет такой же, но решение отличается так как рендеринг это третий шаг. А не сразу после выполнения кода. Обычный код 1. Обычный код 2. setTimeout 1. setTimeout 3. setTimeout 2. Вот такое вот решение: В стек попадает 'Обычный код 1' выполняется и удаляется из стека. setTimeout 1 - летит в Web API, где обрабатывается и после обработки добавляется в очередь Callback Queue и ждёт своей очереди на выполнение, когда Call Stack (основной стек) станет пустым, функция из очереди Callback Queue полетит в основной стек Call Stack. setTimeout 3 - летит в Web API, где обрабатывается и после обработки добавляется в очередь Callback Queue и ждёт своей очереди на выполнение, когда Call Stack (основной стек) станет пустым, функция из очереди Callback Queue полетит в основной стек Call Stack. В стек попадает 'Обычный код 2' выполняется и удаляется из стека. Теперь когда Call Stack (основной стек) пустой JS смотрит есть-ли микрозадачи. Микрозадач у нас нету, переходит к следующему этапу. Здесь рендеринг сраницы, показывает все изменения на экране. То есть выводит на экран 'Обычный код 1', 'Обычный код 2'. После рендеринга из Callback Queue очереди по одной добавляются макрозадачи в основную очередь Call Stack: В стек попадает setTimeout 1 и ждёт пока все внутренне функции у него отработают. В стек попадает output = 'setTimeout 1' выполняется и удаляется из стека. Дальше setTimeout 2 - летит в Web API, где обрабатывается и после обработки добавляется в очередь Callback Queue и ждёт своей очереди на выполнение, когда Call Stack (основной стек) станет пустым, функция из очереди Callback Queue полетит в основной стек Call Stack. После удаляется из стека setTimeout 1. Теперь когда Call Stack (основной стек) пустой JS смотрит есть-ли микрозадачи. Микрозадач у нас нету, переходит к следующему этапу. Здесь рендеринг сраницы, показывает все изменения на экране. То есть выводит на экран 'setTimeout 1'. В стек попадает setTimeout 3 и ждёт пока все внутренне функции у него отработают. В стек попадает output = 'setTimeout 3' выполняется и удаляется из стека. После удаляется из стека setTimeout 3. Теперь когда Call Stack (основной стек) пустой JS смотрит есть-ли микрозадачи. Микрозадач у нас нету, переходит к следующему этапу. Здесь рендеринг сраницы, показывает все изменения на экране. То есть выводит на экран 'setTimeout 3'. Далее у нас в стеке есть ещё setTimeout 2. В стек попадает setTimeout 2 и ждёт пока все внутренне функции у него отработают. В стек попадает output = 'setTimeout 2' выполняется и удаляется из стека. После удаляется из стека setTimeout 2. Теперь когда Call Stack (основной стек) пустой JS смотрит есть-ли микрозадачи. Микрозадач у нас нету, переходит к следующему этапу. Здесь рендеринг сраницы, показывает все изменения на экране. То есть выводит на экран 'setTimeout 2'.

🔥🔥🔥

Мой новый канал ukposts.info/have/v-deo/pZuil5uweY5yxaM.html Видео теперь будут тут 👆 === Тайм коды === 0:00 - Что будет на этом уроке 0:45 - Особенности языка JavaScript 2:20 - Что такое call stack 3:48 - Работа call stack-а (Пример 1) 5:03 - Работа call stack-а (Пример 2) 6:42 - Асинхронность в JS (event loop) 10:26 - Eevent loop, интерактивная демонстрация 13:51 - Тестовое задание Узнай JavaScipt лучше: ukposts.info/have/v-deo/mn9pbGejf46axoU.html Vue.js подробный курс: ukposts.info/have/v-deo/qYiZoYCfiWZ3yZs.html

дякую))

Этот комент для продвижения одного из самых понятных роликов ;)

Наконец то я понял этот эвентлуп

Более подробного и ясного объяснения на эту тему я еще не видел. Спасибо большое! И еще хотел уточнить, в Вашем задании. Первым выполниться timer 1 потом timer 3, а потому timer 2 потому что: в Web Api попадает первый таймер и выполняется там, потом попадает в очередь и так же таймер 3, и когда уже в стеке выполняется timer 1 то тогда он уже запускает timer 2 который попадает в Web Api и потом выполняется?)

Монтаж зачёт.

Нормально

console.log( ' start ' ) setTimeout (function one() { console.log ( ' timer 1 ' ); setTimeout (function two() { console.log ( ' timer 2 ' ) }, 0) }, 1000) setTimeout (function tree() { console.log ( ' timer 3 ' ) }, 0) console.log ( ' end ' ) Здравствуйте! Добавил в setTimeout "1000" вместо "0" и получил в консоль : "start" "end" "timer 3" "timer 1" "timer 2 " но сайт latentflip (при таких же данных) выдает следующую последовательность : "start" "end" "timer 1" "timer 3" "timer 2 " объясните пожалуйста.

Спасибо за видео. Но, ничего не сказано про promise, разделение на микро и маркотаски, последовательность их выполнения.

А почему main.js является функцией?

start, end, timer 1, timer 3, timer 2

микрозадачи и макрозадачи в пролёте да?

start end timer 1 timer 3 timer 2

@JAVA И SКРИПТЫ Автор, а Филиппа Робертса не хочешь упомянуть в своем видео?

start end 1 3 2

Ты почему перестал видео снимать !!?!?!?!? А ну возвращайся!!

Спасибо за видос но я нашёл ошибку. На 4:20 не правильно! console.log('start') и console.log('end') выполняются но не выводятся в консоль! Вернее они только в консоль выводятся но не на страницу. Они выполняются, дальше идёт следующий этап, когда Call Stack (основной стек) пустой JS смотрит есть-ли микро задачи. Микро задач у нас нету, переходит к следующему этапу. Здесь рендеринг страницы. Вот тут они выводятся в консоль и на страницу и куда-угодно! Перед тем как JS будет уже выводить макро задачи.

start end timer1 timer3 timer2

console.log('start') setTimeout(() => { console.log('timer 1') }, 1000) setTimeout(() => { console.log('timer 2') }, 2000) setTimeout(() => { console.log('timer 3') }, 3000) console.log('end')

start end timer 1 timer 2 timer 3 ?

Лучше объяснение стека в рунете

1 - Start, 2 - end , 3 - timer 1 , 4 - timer -2 , 5 - timer 3 Я ошибся, сначала таймер 3, а потом только таймер 2

Читал про промисы.. Там говорится про очередь микро задач.. И очередь макро задач.. В этом видео ни слова про эти задачи..

Не доверяю людям которые не ставят ;

просто передрал до запятой филипа робертса...мда, контент однаако

а промисы где? ставлю дизлайк

Такого копипастера мир не видел давно)

Некрасиво автор поступает. По сути это перевод объяснения Филиппа Робертса с конференции JSConf EU 2014. В том числе используется его тулза loupe. Но отсылки на источник нет. Тихо стырил и ушел называется нашел? И да, отписка "Информация для уроков была собрана исходя из авторитетных ресурсов в интернете" не является отсылкой к источнику.

start end 1 3 2

start end timer 1 timer 3 timer 2