Типи асинхронних операцій

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

Основні типи асинхронних операцій у 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

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

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

Premium

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