Блог

Главная - Вопросы по программированию - Микрозадача, выполняемая до завершения текущей задачи

Микрозадача, выполняемая до завершения текущей задачи

#javascript #es6-promise

#javascript #es6-обещание

Вопрос:

Недавно я читал о различиях между макро- и микрозадачами в JavaScript. Я наткнулся на вещь, которую я не могу понять. В этой статье приведен пример использования promise в coditionals и то, как они могут повлиять на порядок выполнения. Вот короткий фрагмент, который я сделал, чтобы воспроизвести его на своем компьютере:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script>
        const root = document.getElementById("root");
        const cache = {};

        root.addEventListener("load", () => console.log("Loaded data"));

        function getData(url) {
            if (cache[url]) {
                root.dispatchEvent(new Event("load"));
            } else {
                Promise.resolve({a: 5}).then(data => {
                    cache[url] = data;
                    root.dispatchEvent(new Event("load"));
                });
            }
        }
    </script>
</body>
</html>

При открытии вышеупомянутой HTML-страницы в браузере дважды выполните следующий код в консоли.

 console.log("Fetching data...");
getData("test");
console.log("Data fetched");

Результатом этого является следующее:

 Fetching data...
Data fetched
Loaded data
Fetching data...
Loaded data
Data fetched

Я не совсем понимаю, почему порядок операторов журнала отличается при втором выполнении кода. Из того, что я понимаю, микро / макрозадачи не могут быть обработаны до завершения текущего сценария или задачи в этом случае (насколько я знаю, каждый фрагмент кода завернут в макрозадачу, которая затем обрабатывается циклом событий). Я бы ожидал того же порядка во всех случаях.

Комментарии:

1. root.dispatchEvent(new Event("load")); вообще не планирует (макрос или другую) задачу, она синхронно отправляет событие и возвращает результаты прослушивателя событий.

2. Теперь я вижу, где я ошибся.. (Я предположил, что это создает макрозадачу)