Узнай JavaScript лучше: Асинхронность в JS, Event loop, Call stack 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!

дякую))

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

🔥🔥🔥

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

Мой новый канал ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mkqceyBXAdo.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 лучше: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bO881lHXieQ.html Vue.js подробный курс: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qXhmJhR0Fhg.html

Последняя задача. Вместо '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'.

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

Более подробного и ясного объяснения на эту тему я еще не видел. Спасибо большое! И еще хотел уточнить, в Вашем задании. Первым выполниться 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, разделение на микро и маркотаски, последовательность их выполнения.

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

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

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

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

start end 1 3 2

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

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

start end timer 1 timer 3 timer 2

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

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

start end timer 1 timer 2 timer 3 ?

start end timer1 timer3 timer2

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

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

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

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

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

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

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

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

start end 1 3 2

start end timer 1 timer 3 timer 2