Асинхронный JavaScript: цикл событий
Hi,
В этом посте мы рассмотрим, что происходит за кулисами, когда мы используем асинхронную функцию.
В прошлом посте мы узнали, что асинхронная функция не ждет, пока функция завершит свою работу, а затем что-то делает с результатом. Асинхронная функция выполняет работу в фоновом режиме, и мы можем перейти к остальным кодам.
Но как javascript справляется с этим, здесь появляется цикл событий.
У нас есть простой пример из последнего поста.
это изображение показывает различные части обработки асинхронной функции за кулисами.
- Он начинается с вызова первой функции. И Execution Context помещает первую функцию поверх стека вызовов.
2. в следующей строке вызывается функция console.log(), создается новый контекст выполнения и текст печатается в консоли.
3. после того, как функция print to console вернется, а контекст выполнения выскочит из стека вызовов, а функция second() будет выполнена.
4. функция second() переходит в стек вызовов.
5. В функции second() есть функция setTimeout(), которая создает другой контекст выполнения.
Функция setTimeout() является частью WEB APIS, которая фактически находится за пределами самого движка javascript.
ПРИМЕЧАНИЕ. Другой пример WEB APIS — методы манипулирования DOM setTimeout , HTTP-запрос для локального хранилища AJAX и т. д.
И именно здесь таймер будет работать две секунды асинхронно. И таймер будет там, пока он не закончит свою работу.
Так как таймер работает асинхронно, мы можем выполнить наш код.
6. следующий шаг setTimeout() возвращает и извлекает из стека вызовов и контекста выполнения второй функции, которая теперь также возвращается и также извлекается из стека.
И снова мы возвращаемся к первой функции.
7. и теперь у нас есть еще один console.log(), так как вы уже создаете другой контекст выполнения и печатаете «конец» на консоли.
8.и, как и другие функции, когда заканчивают работу, затем всплывают из стека вызовов. И функция first() закончилась и выскочила из стека вызовов.
Прямо сейчас мы выполнили весь наш код синхронно. Но что теперь происходит с нашей функцией обратного вызова?
9. функция обратного вызова перемещается в TASK QUEUE и ожидает выполнения, как только стек выполнения пуст, и это также происходит с событиями DOM. Но здесь возникает вопрос, как выполняются эти функции обратного вызова в TASK QUEUE?
А теперь приходит Even Loop.
Та часть, которую мы собираемся обсудить, действительно важна.
Событие Lope отслеживает TASK QUEUE и CALL STACK и выдвигает первую функцию обратного вызова в очереди. В СТЕК ВЫЗОВОВ, как только стек станет пустым
10. после проверки EVENT LOOP стек пуст, отправьте функцию обратного вызова в CALL STACK, и для этой функции будет создан новый контекст выполнения.
Это то, что делает цикл событий.
Но есть смысл. Функция обратного вызова имеет функцию журнала, которая регистрирует «асинхронную функцию».
11. после этого log() контекст выполнения выскакивает, и задание функции обратного вызова завершается, функция обратного вызова также выскакивает.
ПРИМЕЧАНИЕ. Если у нас было что-то вроде вызова DOM Event или AJAX, EVENT LOOP продолжит помещать их в стек.
И конец истории.
надеюсь, вам понравится и полезно для вас.
по мотивам Йонаса Шмедтманна
