PassFront
  1. PassFront
  2. База знаний
  3. Асинхронность и Event Loop

Как поставить микрозадачу в очередь?

Асинхронность и Event Loop

Микрозадачу в очередь ставят через `queueMicrotask(callback)`, `Promise.resolve().then(callback)` или `await`. Все они добавляют задачу в очередь микрозадач.

queueMicrotask (прямой способ)

queueMicrotask(() => {
  console.log('микрозадача');
});

Явно ставит функцию в очередь микрозадач.

Promise.resolve().then()

Promise.resolve().then(() => {
  console.log('микрозадача через промис');
});

Коллбэк then — микрозадача.

await (в async-функции)

async function fn() {
  await null; // продолжение после await — микрозадача
  console.log('после await');
}

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

Микрозадачи выполняются после синхронного кода и раньше макрозадач (setTimeout):

console.log('1');                              // sync
setTimeout(() => console.log('4'), 0);         // macro
queueMicrotask(() => console.log('3'));        // micro
Promise.resolve().then(() => console.log('3.5')); // micro
console.log('2');                              // sync
// 1, 2, 3, 3.5, 4

queueMicrotask vs Promise

  • queueMicrotask — семантически чище для «просто поставить микрозадачу».
  • Promise.resolve().then — то же, но через промис.

Осторожно

Бесконечная генерация микрозадач блокирует рендер и макрозадачи:

function loop() { queueMicrotask(loop); } // зависнет

Коротко для собеседования

Микрозадачу ставят: queueMicrotask(callback) (прямой, чистый способ), Promise.resolve().then(callback) (коллбэк — микрозадача), await (продолжение — микрозадача). Микрозадачи выполняются после синхронного кода и раньше макрозадач (setTimeout). Бесконечная генерация микрозадач блокирует рендер.

Другие вопросы раздела