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

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

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

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

Контент

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

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

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

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

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

## Основні типи асинхронних операцій у JavaScript

| № | Тип операції | Де виконується | Приклади |
|---|---|---|---|
| 1 | **Таймери (Timers)** | Web API / Node API | `setTimeout`, `setInterval`, `setImmediate` |
| 2 | **Мережеві операції (Network I/O)** | Web API / Node API | `fetch`, `XMLHttpRequest`, `axios`, `http.get`, `fs.readFile` |
| 3 | **Події (Event listeners)** | Web API / DOM | `addEventListener`, події кліків, клавіш, скролу |
| 4 | **Проміси та мікрозадачі** | JS Engine (усередині Event Loop) | `Promise.then`, `async/await`, `queueMicrotask` |
| 5 | **Рендеринг та анімації** | Web API (браузер) | `requestAnimationFrame`, `IntersectionObserver`, `MutationObserver` |
| 6 | **Web Workers / Node Workers** | Окремий потік | `new Worker()`, `postMessage`, `onmessage` |
| 7 | **Файлові / потокові операції** *(Node.js)* | Node API | `fs.readFile`, `stream.on('data')` |

---

## 1. Таймери (`setTimeout`, `setInterval`)

Асинхронні операції, що виконуються **через заданий проміжок часу**.

```javascript
setTimeout(() => console.log('Через 2 секунди'), 2000);
setInterval(() => console.log('Кожні 3 секунди'), 3000);
```

Після зазначеного часу колбек потрапляє в **чергу макрозадач**.

---

## 2. Мережеві операції (`fetch`, `XHR`)

Асинхронні запити до сервера. JS не чекає відповіді: запит іде "у фон".

```javascript
fetch('/api/data')
  .then(res => res.json())
  .then(console.log);
```

Коли відповідь отримано, проміс резолвиться → створюється **мікрозадача**, яка обробляє `.then()`.

---

## 3. Події DOM (`addEventListener`)

Колбеки подій викликаються **асинхронно**, коли користувач взаємодіє зі сторінкою.

```javascript
button.addEventListener('click', () => {
  console.log('Клік!');
});
```

Колбек потрапляє в **чергу макрозадач** при кожній події.

---

## 4. Проміси та мікрозадачі (`Promise`, `queueMicrotask`, `async/await`)

Асинхронні операції **всередині самого рушія JS**.
Виконуються **раніше**, ніж таймери: одразу після поточного коду.

```javascript
Promise.resolve().then(() => console.log('Мікрозадача'));
queueMicrotask(() => console.log('Ще одна мікрозадача'));
```

Ці завдання потрапляють у **чергу мікрозадач**, яка має вищий пріоритет.

---

## 5. Анімації та рендеринг (`requestAnimationFrame`, `MutationObserver`)

Дозволяють виконувати дії **синхронно з кадрами браузера** (60 FPS).

```javascript
requestAnimationFrame(() => console.log('Перед перемальовуванням кадру'));
```

Ці колбеки запускаються **перед відмальовуванням екрана**, щоб оновлення DOM були плавними.

---

## 6. Web Workers (паралельні потоки)

Дозволяють виконувати важкі обчислення **в окремому потоці**, не блокуючи UI.

```javascript
const worker = new Worker('worker.js');
worker.postMessage('Привіт!');
worker.onmessage = e => console.log(e.data);
```

Це **справді паралельний потік**, але взаємодія з ним асинхронна (через повідомлення).

---

## 7. Node.js: файлова система та потоки

У Node.js багато асинхронних API - читання файлів, мережеві з'єднання тощо.

```javascript
const fs = require('fs');

fs.readFile('data.txt', 'utf8', (err, data) => {
  console.log(data);
});
```

Такі операції виконуються в **пулі потоків (libuv)**, а результат повертається асинхронно.

---

## Візуально (спрощена схема Event Loop)

```javascript
┌────────────────────────────────────────────┐
│           Зовнішні API (Web/Node)          │
│────────────────────────────────────────────│
│ setTimeout | fetch | events | fs.readFile  │
└────────────┬────────────┬────────────┬──────┘
             │            │            │
     ↓       ↓            ↓            ↓
┌────────────────────────────────────────────┐
│          Черга макрозадач (Tasks)          │
└────────────────────────────────────────────┘
     ↓
┌────────────────────────────────────────────┐
│         Черга мікрозадач (Microtasks)      │
└────────────────────────────────────────────┘
     ↓
┌────────────────────────────────────────────┐
│           Call Stack (виконання)           │
└────────────────────────────────────────────┘
```

---

## Підсумок

| Категорія | Приклади | Черга |
|---|---|---|
| Таймери | `setTimeout`, `setInterval` | Макрозадачі |
| Мережеві | `fetch`, `XHR`, `fs.readFile` | Макро → потім мікрозадача при `.then` |
| Події | `click`, `scroll`, `input` | Макрозадачі |
| Проміси | `Promise.then`, `queueMicrotask` | Мікрозадачі |
| Анімації | `requestAnimationFrame`, `MutationObserver` | Спец. черга перед кадром |
| Web Workers | `Worker` API | Паралельно, але спілкування асинхронне |
| Node.js | `fs`, `stream`, `net`, `dns` | Макрозадачі / внутрішні черги libuv |

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

Для рев’юера

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

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