Що робить queueMicrotask()?

JavaScriptJunior~1 хв читання

Визначення

javascript

queueMicrotask(callback)

Що робить:

Додає функцію callback у чергу мікрозавдань;
Вона виконається після завершення поточної функції, але до будь-яких setTimeout, setInterval, подій та інших макрозавдань.

Приклад

javascript

console.log('A');

queueMicrotask(() => console.log('B'));

console.log('C');

Вивід:

javascript

A
C
B

Чому?

Спочатку виконується весь синхронний код (A, потім C);
Потім Event Loop бачить, що стек порожній, і виконує мікрозавдання (B), перш ніж перейти до макрозавдань.

Що відбувається під капотом

Поточний код (у Call Stack) виконується до кінця;
Після його завершення Event Loop перевіряє чергу мікрозавдань;
Усі мікрозавдання з черги виконуються по порядку;
Тільки потім береться наступне макрозавдання (наприклад, setTimeout).

Порівняння з `Promise.then`

queueMicrotask() працює так само, як Promise.resolve().then(callback), але без створення Promise-об'єкта, що робить його трохи швидшим і простішим.

Приклад - еквівалентний код:

javascript

Promise.resolve().then(() => console.log('microtask via Promise'));
queueMicrotask(() => console.log('microtask via queueMicrotask'));

Обидві функції потраплять у чергу мікрозавдань і виконаються раніше будь-яких таймерів.

Приклад з таймером

javascript

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

queueMicrotask(() => console.log('microtask'));

console.log('sync');

Вивід:

javascript

sync
microtask
timeout

Порядок:

sync - синхронний код,
microtask - черга мікрозавдань,
timeout - черга макрозавдань.

Важливо знати

1. Усі мікрозавдання виконуються підряд

Якщо всередині мікрозавдання створити нове, воно додасться в чергу і виконається до переходу до макрозавдання.

javascript

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('B'));
});

Вивід:

javascript

A
B

2. Можна "зависнути" при нескінченному додаванні

javascript

function loop() {
  queueMicrotask(loop);
}
loop();

Такий код "повісить" Event Loop - мікрозавдання будуть виконуватися нескінченно, і жодне макрозавдання (setTimeout, кліки тощо) не дійде до виконання.

3. Підтримується всюди

queueMicrotask() - стандарт ECMAScript 2019, і підтримується всіма сучасними браузерами і Node.js.

Підсумок

Властивість	Значення
Що робить	Додає функцію в чергу мікрозавдань
Коли виконується	Після поточного коду, але до будь-яких макрозавдань
Аналог	`Promise.resolve().then(fn)`
Черга	Microtask Queue
Повернення	`undefined`
Використання	Легка, швидка альтернатива промісам для мікрозавдань

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.