✨♻️ Визуализация JavaScript: цикл событий
Удивительные функции в React и React Router v6
20.01.2022
Как работает JavaScript🔥 🤖 [Визуальное объяснение]
21.01.2022
Визуализация JavaScript (серия из 7 частей)
1✨♻️ Визуализация JavaScript: цикл событий
2🔥🕺🏼 2.Визуализация JavaScript: подъем
3⚡️⛓3.Визуализация JavaScript: область действия (цепочка)
4.🚀⚙️ Визуализация JavaScript: движок JavaScript
5.🎉👨👩👧👧 Визуализация JavaScript: прототипное наследование
6💡🎁 Визуализация JavaScript: генераторы и итераторы
7⭐️🎀 Визуализация JavaScript: промисы и асинхронность/ожидание
Визуализация одна из тех вещей, с которыми так или иначе приходится сталкиваться каждому разработчику JavaScript
Но сначала нужно понимать, что такое цикл событий и почему вас это нужно для работы?
JavaScript является однопоточным: одновременно может выполняться только одна задача. Обычно это не имеет большого значения, но теперь представьте, что вы выполняете задачу, которая занимает 30 секунд.. Да.. Во время этой задачи мы ждем 30 секунд, прежде чем что-либо еще может произойти (по умолчанию JavaScript запускается в основном потоке браузера, поэтому весь интерфейс застрял) 😬 Никому не нужен медленный, неотзывчивый сайт.
К счастью, браузер предоставляет нам некоторые функции, которые не предоставляет сам движок JavaScript: веб-API. Сюда входят DOM API, setTimeout, HTTP-запросы и т. д. Это может помочь нам создать асинхронное неблокирующее поведение 🚀
Когда мы вызываем функцию, она добавляется в нечто, называемое стеком вызовов. Стек вызовов является частью движка JS, это не зависит от браузера. Это стопка, что означает, что она приходит первой, уходит последней. Когда функция возвращает значение, оно извлекается из стека 👋
Функция respondвозвращает setTimeoutфункцию. Предоставляется setTimeoutнам веб-API: он позволяет нам откладывать задачи, не блокируя основной поток. Функция обратного вызова, которую мы передали setTimeoutфункции, функция стрелки () => { return 'Hey'} добавляется в веб-API. Тем временем setTimeoutфункция и функция ответа выталкиваются из стека, они обе возвращают свои значения!
В веб-API таймер работает до тех пор, пока мы передаем ему второй аргумент, 1000 мс. Обратный вызов не сразу добавляется в стек вызовов, вместо этого он передается в нечто, называемое очередью.
Это может сбивать с толку, не означает, что функция обратного вызова добавляется в стек вызовов (таким образом, возвращает значение) через 1000 мс! Он просто добавляется в очередь через 1000 мс. Но это очередь, функция должна ждать своей очереди!
Пришло время циклу обработки событий выполнить свою единственную задачу: соединить очередь со стеком вызовов ! Если стек вызовов пуст , то есть если все ранее вызванные функции вернули свои значения и были извлечены из стека, первый элемент в очереди добавляется в стек вызовов. В этом случае никакие другие функции не вызывались, а это означает, что стек вызовов был пуст к тому времени, когда функция обратного вызова была первым элементом в очереди.
Обратный вызов добавляется в стек вызовов, вызывается, возвращает значение и извлекается из стека.
Читать статью полезно, но вы полностью разобраться в этом вопросе сможете, если будете практиковаться. Попробуйте выяснить, что будет записано в консоль, если мы запустим следующее:
|
1 2 3 4 5 6 7 8 9 10 11 |
const foo = () => console.log("First"); const bar = () => setTimeout(() => console.log("Second"), 500); const baz = () => console.log("Third"); bar(); foo(); baz(); |
Понятно? Давайте быстро посмотрим, что происходит, когда мы запускаем этот код в браузере:
- Мы вызываем
bar.barвозвращаетsetTimeoutфункцию. - Обратный вызов, которому мы передали,
setTimeoutдобавляется в веб-API,setTimeoutфункцию иbarизвлекается из стека вызовов. - Таймер работает, тем временем
fooвызывается и регистрируетFirst.fooвозвращает (не определено),bazвызывается, и обратный вызов добавляется в очередь. bazжурналыThird. Цикл событий видит, что стек вызовов пуст послеbazвозврата, после чего обратный вызов добавляется в стек вызовов.- Журналы обратного вызова
Second.
После практики вы почувствуете себя более уверенно с циклом событий! Не беспокойтесь, если все кажется запутанным, самое главное — понять, откуда могут возникнуть определенные ошибки/поведение , чтобы эффективно использовать Google правильные термины и оказаться на правильной странице переполнения стека 💪🏼 Практикуйтесь и все получится!
Источник статьи: http://dev.to/
