Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "microtask queue"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Що таке черга мікрозадач

> **Microtask queue (черга мікрозадач)** - це черга задач, які повинні бути виконані **одразу після поточного коду**,
> але **до наступного макротаска** (наприклад, `setTimeout`, `click`, `load` тощо).

Тобто:

- JavaScript виконує твій основний код (main script);
- потім **виконує всі мікротаски** (наприклад, `.then()` з Promise);
- і тільки потім переходить до наступного макротаска (наприклад, `setTimeout`).

---

## 2. Приклад (зверни увагу на порядок)

```javascript
console.log('1');

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

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

console.log('4');
```

Результат у консолі:

```javascript
1
4
3 - Promise
2 - setTimeout
```

Чому так:

1. Спочатку виконується весь **синхронний код** (`1`, `4`);
2. Потім - **мікротаски** (`Promise.then`);
3. І тільки потім - **макротаски** (`setTimeout`).

---

## 3. Які операції створюють мікротаски

| Джерело мікротаски | Приклад |
|---|---|
| **Promises** | `Promise.resolve().then(...)` |
| **MutationObserver** | спостереження за DOM |
| **queueMicrotask()** | ручне створення мікротаски |
| **async/await** | всередині `await` створюється мікротаска |

---

## 4. Приклад з `queueMicrotask`

```javascript
console.log('A');

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

console.log('C');
```

Вивід:

```javascript
A
C
B - microtask
```

Мікротаска `B` виконується **після завершення поточного коду**,
але **до будь-яких інших подій** (setTimeout тощо).

---

## 5. Приклад з Promises і setTimeout

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

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

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

Вивід:

```javascript
promise
microtask
timeout
```

Усі мікротаски виконуються **до** `setTimeout`.

---

## 6. Порядок виконання в Event Loop (спрощено)

```javascript
1. Виконати весь синхронний код (script)
2. Виконати всі мікротаски (Promise, queueMicrotask)
3. Перейти до наступного макротаска (setTimeout, DOM events тощо)
4. Повторити цикл
```

---

## 7. Приклад з async/await

```javascript
async function example() {
  console.log('start');
  await null; // створює мікротаску
  console.log('end');
}

example();
console.log('after');
```

Вивід:

```javascript
start
after
end
```

Чому:

- `await` призупиняє функцію;
- код "після" йде в **чергу мікрозадач**;
- після виконання поточного коду (`after`) - виконується `end`.

---

## 8. Відмінність microtask від macrotask

| Тип | Приклади | Коли виконується |
|---|---|---|
| **Microtask** | `Promise.then`, `queueMicrotask`, `await`, `MutationObserver` | Одразу після поточного коду, перед макротасками |
| **Macrotask** | `setTimeout`, `setInterval`, `I/O`, `click`, `load` | Після всіх мікротасок, у наступному циклі Event Loop |

---

## 9. Приклад повної картини

```javascript
console.log('1');

setTimeout(() => console.log('2 - макротаск'), 0);

Promise.resolve().then(() => console.log('3 - мікротаск'));

queueMicrotask(() => console.log('4 - мікротаск'));

console.log('5');
```

Результат:

```javascript
1
5
3 - мікротаск
4 - мікротаск
2 - макротаск
```

---

## Підсумок

| Поняття | Що це |
|---|---|
| **Microtask queue** | Черга задач, що виконуються після поточного коду, але до наступного макротаска |
| **Приклади джерел** | Promises, `queueMicrotask`, `await`, `MutationObserver` |
| **Коли виконуються** | Після основного коду і перед `setTimeout` |
| **Навіщо потрібні** | Щоб обробляти асинхронний код швидко, без затримок (наприклад, результати Promise) |

---

> **Запам'ятай просто:**
>
> - **Microtasks** виконуються "між рядків" - одразу після твого коду.
> - **Macrotasks** (setTimeout, click) виконуються "потім", на наступному кроці Event Loop.
>
> Або коротко:
> **Promises -> microtasks -> швидше, ніж setTimeout.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати502 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.