Автор: Лидия Холли.
Переводчик: Front-end Xiaozhi
Источник: разработчик
Ставьте лайк и смотрите снова, формируйте привычку
эта статья
GitHubGitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.
Что такое цикл событий и почему я должен это понимать?
JS однопоточный: одновременно может выполняться только одна задача. Обычно это невелико, но теперь я представляю, какая у нас запущенная потребность.30秒задача. В этой задаче мы хотим подождать30秒, прежде чем вы сможете делать то, что хотите сделать дальше (по умолчанию JS запускается в основном потоке браузера, поэтому весь пользовательский интерфейс зависает).
К счастью, браузеры предлагают некоторые функции, которых нет у самих JS-движков:Web API. Это включает в себяDOM API,setTimeout,HTTPзапрос и тд. Эти API могут помочь нам создать асинхронное неблокирующее поведение.
Когда мы вызываем функцию, она добавляется в стек вызовов. Стек вызовов является частью движка JS, он не зависит от браузера. Порядок внутри стека - первый пришел последним, когда функция возвращает значение, оно извлекается из стека.
responseфункция возвращаетsetTimeoutфункция.setTimeoutКWeb APIПредоставлено: это позволяет нам откладывать задачи, не блокируя основной поток. мы переходим кsetTimeoutобратный вызов функции()=> {return 'Hey'}был добавлен вWeb APIсередина. в то же время,setTimeoutфункция иresponseФункции извлекаются из стека, и все они возвращают свои значения.
существуетWeb API, время работы таймера совпадает со вторым параметром, который мы ему передаем1000msтакой же длины. Обратные вызовы не сразу добавляются в стек вызовов, а передаются в очередь.
Это может быть запутанной частью: это не означает1000msПосле этого callback-функция добавляется в стек вызовов, это сразу после1000msдобавлен в очередь. В очереди функция должна дождаться своей очереди перед выполнением.
Прямо сейчас мы ждали, пока цикл обработки событий выполнит свою единственную задачу: соединит очередь со стеком вызовов. Если стек вызовов пуст, первый элемент в очереди добавляется в стек вызовов, если все ранее вызванные функции вернули свои значения и были извлечены из стека. В этом примере никакие другие функции не вызываются, что означает, что стек вызовов пуст, когда функция обратного вызова становится первым элементом в очереди.
Функция обратного вызова добавляется в стек вызовов, вызывается, возвращает значение, а затем извлекается из стека.
Через анимацию это выглядит интересно, но все же требуется несколько повторений, чтобы лучше понять взаимосвязь между ними. Теперь давайте проверим это, как показано в следующем коде, скажите, пожалуйста, результат выполнения:
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
Понятно? Давайте быстро посмотрим, что происходит, когда мы запускаем этот код в браузере.
1. Вызовите функциюbar,barвернутьsetTimeoutфункция.
2. Переходим кsetTimeoutОбратный вызов добавлен вWeb API,setTimeouфункция иbarВытолкнуть из стека вызовов.
3. Таймер работает, пока функцияfooвызывается и печатаетFirst.fooreturn, затем вызовите функциюbazи добавьте обратный вызов в очередь.
4. ФункцияbazРаспечататьThird, цикл событий видитbazПосле возврата стек вызовов пуст, а затем обратные вызовы в очереди обработки добавляются в стек вызовов.
- Печать функции обратного вызова
Second.
Я надеюсь, что эта статья будет полезна для вашего понимания цикла событий, увидимся в следующей статье.
оригинал:Dev.to/Лидия Холли…
Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.
общаться с
Статьи из серии галантерейных товаров резюмируются следующим образом: если вы чувствуете себя хорошо, нажмите «Звезда», добро пожаловать в группу, чтобы учиться друг у друга.
Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!
Обратите внимание на публичный аккаунт и отвечайте в фоновом режимеБлагосостояние, вы можете увидеть преимущества, вы знаете.