в этой краткой статье я покажу вам, как цикл событий, стек вызовов, очередь обратного вызова и веб-API (таблица событий) работают вместе и обрабатывают асинхронные и синхронные функции. хорошо, давайте углубимся в это.
что такое стек вызовов ?
когда мы пишем какие-то функции в нашем коде и вызываем их, эти ребята отправляются в стек вызовов для запуска, после чего они из него выскакивают.
на приведенном выше gif показано, как функции упорядоченно попадают в стек вызовов, а после выполнения они выскакивают из него, и одна интересная вещь, которая привлекает ваше внимание, — это асинхронная функция setTimeout, которая не закончится прямо здесь (мы поговорим об этом больше), но сначала давайте разобьем гифку на несколько частей, чтобы увидеть, что именно происходит:
- вызывается функция приветствия
- эта функция переходит в стек вызовов для запуска
- теперь стек вызовов выполняет эту функцию и возвращает «привет»
- функция приветствия выскакивает из стека вызовов
- теперь функция ответа идет так же, как указано выше
на этом гифка, продолжим...
Веб-API (таблица событий), очередь обратного вызова, цикл событий
Представляем веб-API (таблицы событий):
все асинхронные функции, такие как Ajax , setTimeout , обработчик событий и т. д., присоединяются к таблице Events и ждут времени выполнения, например: setTimeout ждет 3000 мс для запуска или обработчик событий ждет, пока не произойдет событие Click, а затем запустится . как мы знаем, функции выполняются в стеке вызовов, но эти ребята еще не могут присоединиться к другим в стеке вызовов, поэтому… они должны идти куда-то еще, но куда?!
Представляем очередь обратного вызова :
как это называется, это очередь обратных вызовов (gusy в таблице событий, помните?), поэтому обратные вызовы, ожидающие выполнения, присоединятся к этой очереди. эта очередь не собирается выполнять обратные вызовы или даже пуахить их в стек вызовов, так что же она делает?!
Представляем цикл событий :
Этот чувак является посредником между веб-API и очередью обратного вызова, что это значит?
цикл событий ожидает и следит за стеком вызовов и очередью обратных вызовов, а когда стек вызовов пуст и нет синхронной функции для выполнения, цикл событий берет первый обратный вызов из очереди обратных вызовов и отправляет его в стек вызовов, и, как обычно, стек вызовов будет выполняться это так же, как и другие функции.
теперь мы знаем, как работает любой из них, давайте посмотрим на гифку ниже, чтобы лучше понять это сотрудничество.
внимание: посмотрите этот gif дважды , первый раз просто посмотрите на функцию bar и ее setTimeout, а второй раз посмотрите на остальные синхронные функции.
давайте теперь посмотрим на GIF выше как на код:
теперь мы можем видеть, что функция bar вызывается первой, но поскольку она асинхронная, ей приходится ждать, пока синхронные ребята будут выполнены первыми, полезно знать, что если бы время setTimeout было даже 0 мс, это ничего бы не изменило, это ахронная функция после всего.
ну это примерно так
теперь вы лучше программируете, чем 10 минут назад.
до свидания и удачи.🤞
