К какой категории задач относится setTimeout в Event Loop

setTimeout в Event Loop

setTimeout относится к категории асинхронных макротаск (Macrotask Queue). Это фундаментальный концепт JavaScript, который определяет, когда и как будут выполняться отложенные операции.

Очереди Event Loop

JavaScript Event Loop содержит несколько очередей:

1. Call Stack (стек вызовов) — синхронный код, выполняется первым
2. Microtask Queue — высокий приоритет
   • Promises (.then/.catch/.finally)
   • queueMicrotask()
   • MutationObserver
3. Macrotask Queue (Task Queue) — низкий приоритет
   • setTimeout
   • setInterval
   • setImmediate (Node.js)
   • I/O операции
   • UI рендеринг

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

console.log(1); // Call Stack

setTimeout(() => {
  console.log(4); // Macrotask Queue
}, 0);

Promise.resolve().then(() => {
  console.log(3); // Microtask Queue
});

console.log(2); // Call Stack

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

Структура выполнения:

1. Сначала выполняется весь синхронный код (Call Stack)
2. Затем все микротаски (Microtask Queue) — они имеют приоритет
3. Потом один макротаск из Macrotask Queue
4. Проверяется, есть ли новые микротаски (они выполняются)
5. Потом следующий макротаск
6. Процесс повторяется

Почему setTimeout — это макротаск

Исторические причины: setTimeout — это браузерный API, который был создан для отложенного выполнения с гарантированной минимальной задержкой (обычно 4мс). Это "тяжёлая" операция с точки зрения браузера.

Практические различия:

setTimeout(() => {
  console.log(timeout);
}, 0);

Promise.resolve().then(() => {
  console.log(promise);
});

// Вывод: promise, timeout
// Promise быстрее, потому что в Microtask Queue

Практические последствия

Когда это важно:

• DOM обновляется после Macrotask — если ты хочешь, чтобы DOM рендерился и потом выполнился код, нужен setTimeout
• Большие вычисления — лучше разбить на несколько setTimeout, чтобы не блокировать UI между ними
• Анимации — requestAnimationFrame выполняется между Macrotask и рендерингом, это лучше, чем setTimeout

Пример с DOM:

const div = document.createElement(div);
document.body.appendChild(div);
div.textContent = Hello;

setTimeout(() => {
  console.log(div.offsetHeight); // можешь прочитать актуальные размеры
}, 0);

Сравнение с альтернативами

Ключевой вывод

setTimeout — это макротаск, потому что он работает на уровне браузера, имеет минимальную задержку и низкий приоритет относительно микротасков. Если нужна срочная асинхронная операция без задержки — используй Promises или queueMicrotask.