Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить queueMicrotask()?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`queueMicrotask()`** додає функцію `callback` у чергу мікрозавдань; вона виконається після завершення поточної функції, але до будь-яких `setTimeout`, `setInterval`, подій та інших макрозавдань. **Ключове:** усі мікрозавдання з черги виконуються по порядку, і лише потім береться наступне макрозавдання.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення ```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`), перш ніж перейти до макрозавдань. ## Що відбувається під капотом 1. Поточний код (у Call Stack) виконується до кінця; 2. Після його завершення Event Loop перевіряє **чергу мікрозавдань**; 3. Усі мікрозавдання з черги виконуються **по порядку**; 4. Тільки потім береться наступне **макрозавдання** (наприклад, `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 ``` Порядок: 1. `sync` - синхронний код, 2. `microtask` - черга мікрозавдань, 3. `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` | | Використання | Легка, швидка альтернатива промісам для мікрозавдань |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.