Что сработает раньше — колбэк или промис?

В JavaScript весь асинхронный код управляется механизмом event loop. Задачи делятся на два типа очередей: микро-задачи (microtasks) и макро-задачи (macrotasks). Промисы, queueMicrotask и MutationObserver попадают в микро-очередь, а setTimeout, setInterval, I/O и UI-события — в макро-очередь.

Порядок выполнения

После завершения текущего синхронного кода event loop сначала полностью опустошает микро-очередь, и только затем берёт одну макро-задачу. После каждой макро-задачи снова проверяется микро-очередь. Поэтому промис всегда обгоняет setTimeout с нулевой задержкой.

Пример

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Вывод: 1, 4, 3, 2

Сначала выполняется весь синхронный код (1 и 4), затем микро-задачи (3), и только потом макро-задачи (2).

Где это важно

• При отладке порядка логов в асинхронном коде.
• При оптимизации рендеринга: микро-задачи блокируют отрисовку, если их слишком много.
• При написании библиотек, где важен точный порядок вызовов.

Итог: промис выполняется раньше колбэка setTimeout, потому что микро-задачи имеют приоритет над макро-задачами. Это правило стоит держать в голове при работе с любым асинхронным кодом.