Углубленный анализ механизма выполнения событий в JS

Как быстро начать работу с VUE3.0:

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

Давайте сначала посмотрим на кусок кода

Друзья, можно попробовать прописать порядок печати.

Однопоточный

JS в основном используется в качестве языка сценариев браузера. Основная цель Js — управлять DOM, который определяет, что JS должен быть однопоточным JS как Java, и если работают два потока. DOM одновременно, то браузер должен Как это реализовать?

Выпуск JS на самом деле призван воспользоваться популярностью Java. Язык был написан не так давно, поэтому JS является однопоточным

механизмом выполнения JS

Поскольку JS является однопоточным, задачи необходимо сортировать. Все задания будут выполняться по правилу.

• Синхронные задачи

• Асинхронные задачи

Синхронные и асинхронные задачи входят в стек выполнения. JS сначала определяет, что тип задачи

• является синхронной. Если она входит непосредственно в основной поток,

• это асинхронная задача. Войдите в Event Table и зарегистрируйте функцию обратного вызова Event Queue После

• выполнения всех синхронных задач JS войдет в Event Queue . Функция чтения

• выполняет этот процесс повторно, пока все задачи не будут выполнены. Вот как мы часто говорим, что事件循环

JS определяет, что стек выполнения пуст

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

Асинхронные задачи

Последовательность выполнения асинхронной задачи следующая: Макрозадачи -> Микрозадачи

Асинхронные задачи можно разделить на

• макрозадачи

• Микрозадачи

Общие макрозадачи

• I/0

• setTimeout

• setInterval

Общие микрозадачи

• Promise

• .then

• .catch

Answer

vite Плагин, настроенный ранее , возникла проблема с версией, игнорируйте этот красный сигнал тревоги.

Анализ

• 开始了с синхронной задачи. Сначала он входит в стек выполнения

• для выполнения функции a task() . Вход в стек выполнения

• async/await — это процесс перехода от асинхронного к синхронному. выполняется синхронно Следующий код будет асинхронным. b входит в стек выполнения как синхронная задача,

• a end становится микрозадачой асинхронной задачи и входит в стек выполнения.

На данный момент очередь синхронных задач开始了, a , b

На данный момент очередь асинхронных задач запустила макрос

задачи: setTimeout Микрозадача: a end

Если последующего кода нет, последовательность печати следующая.

Итак, возникает вопрос, не означает ли это, что макрозадачи будут выполняться раньше, чем микрозадачи. Почему setTimeout печатается после a end ?

看这张图

setTimeout входит в очередь задач как макрозадача. Итак, причина этого

вообще говоря:

async await приводит к генерации микрозадачи, но эта микрозадача принадлежит текущей макрозадаче. Таким образом, сначала будет выполнено a end , а после выполнения будет принято решение, что текущая макрозадача завершилась. Выполните следующую макрозадачу, распечатайте setTimeout

и продолжите процесс

• c Из-за преобразования Promise она становится синхронной задачей и входит в очередь задач.

• c end входит в очередь задач, когда микрозадача, полученная из Promise

• d , входит в очередь

.

• очередь задач как синхронная задача.

Пока синхронизация. Очередь задач

• a

• b

• c

• d.

Пока очередь асинхронных задач

• a end microtask

• c end microtask

• setTimeout macrotask,

поэтому порядок печати следующий.

Постскриптум:

Мое понимание механизма выполнения JS может быть несколько неверным, и я надеюсь, что вы, ребята, сможете это указать.

[Рекомендуемые видеоуроки: веб-интерфейс]

Выше представлен углубленный анализ деталей механизма выполнения событий в JS. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!