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

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

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

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

Контент

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

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

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

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

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

**Черга завдань (Task Queue)** - це структура даних, у якій зберігаються **завдання (callback'и)**, що очікують виконання після звільнення **стека викликів (Call Stack)**.
Вона є ключовим елементом механізму **Event Loop** (циклу подій) у JavaScript.

## Ключова ідея

JavaScript - **однопотокова мова**, вона може виконувати **тільки одне завдання за раз**.
Коли рушій зайнятий виконанням функцій у **стеку викликів**, інші завдання, наприклад, обробники кліків, `setTimeout`, `fetch` тощо, чекають своєї черги у **черзі завдань (task queue)**.

Коли стек викликів стає порожнім, **Event Loop** бере перше завдання з черги і поміщає його в стек, і так триває нескінченно.

## Приклад

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

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

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

### Покроково:

1. `console.log('1')` - виконується одразу.
-> виводить `1`.
2. `setTimeout(...)` - браузер ставить таймер.
Після спрацювання таймера колбек потрапляє **в чергу завдань** (task queue), а не виконується одразу.
3. `console.log('3')` - виконується.
-> виводить `3`.
4. Коли **стек викликів порожній**, **Event Loop** бере завдання з черги (колбек з `setTimeout`) і поміщає його в стек.
-> виводить `2`.

**Вивід у консолі:**

```javascript
1
3
2
```

## Черга завдань vs Мікрозавдання

У JavaScript є **дві черги:**

| Тип черги | Джерело завдань | Коли виконуються |
|---|---|---|
| **Task Queue (macro tasks)** | `setTimeout`, `setInterval`, події DOM, завершений з помилкою `fetch.then` тощо | Після очищення стека і всіх мікрозавдань |
| **Microtask Queue** | `Promise.then`, `queueMicrotask`, `MutationObserver` | Одразу після поточного завдання, **до** наступного макрозавдання |

### Приклад з мікрозавданнями

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

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

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

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

**Порядок виводу:**

```javascript
A
D
C
B
```

Пояснення:

- `A`, `D` -> виконуються одразу (стек викликів).
- `C` -> мікрозавдання -> виконується одразу після очищення стека.
- `B` -> макрозавдання -> виконується після всіх мікрозавдань.

## Підсумок

| Термін | Опис |
|---|---|
| **Task Queue** | Черга макрозавдань - зберігає колбеки від `setTimeout`, подій тощо |
| **Microtask Queue** | Черга мікрозавдань - для `Promise.then`, `queueMicrotask` |
| **Event Loop** | Механізм, що стежить за стеком і чергами, і вирішує, що виконувати далі |
| **Порядок** | Спочатку виконується стек -> мікрозавдання -> макрозавдання |

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

Для рев’юера

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

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