Почему порядок вывода асинхронного JavaScript меняется, когда я медленно отлаживаю с помощью «Step Over» в Chrome DevToo ⇐ Javascript

[Anonymous]

Код (воспроизводимый пример)

Код: Выделить всё

console.log("Start");

setTimeout(() => {
console.log("Async task1");
}, 2000);

setTimeout(() => {
console.log("Async task2");
}, 1000);

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log("Fetched data:", json));

console.log("End");

Что я пробовал
Я добавил точки останова в каждую строку в Chrome DevTools → вкладка «Источники».
Я использовал кнопку «Шаг через (F10)» для построчной отладки.
Я тестировал один и тот же код в разных браузерах и в системах других разработчиков.
Чего я ожидал
При запуске или отладке я ожидал одинакового последовательного порядка вывода:

Код: Выделить всё

Start
End
Fetched data: { ... }
Async task2
Async task1

Это имеет смысл — поскольку setTimeout и fetch являются асинхронными, и цикл событий должен обрабатывать их после синхронных журналов.
Что на самом деле произошло
Когда я медленно прохожу код с помощью отладчика:
Порядок вывода меняется в зависимости от того, как долго я делаю паузу, прежде чем нажать «Шаг». Конец».
Иногда печатает:

Код: Выделить всё

Start
End
Async task1
Async task2
Fetched data: { ... }

Порядок асинхронных журналов меняется, даже если код не был изменен.
Однако, когда я действую быстро, порядок вывода остается таким, как ожидалось.
Мое понимание
Я думаю, что это происходит потому, что:
Когда отладчик приостанавливается, основной поток JS остановлено,
Но веб-API (такие как setTimeout и fetch) продолжают работать в режиме реального времени.
Поэтому, пока они приостановлены, таймеры и сетевые запросы завершают время ожидания в фоновом режиме.
Когда я возобновляю работу, они уже готовы к работе, поэтому цикл событий выполняет их немедленно, изменяя порядок.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... owly-using