Suggest an edit

Improve this article

Refine the answer for “Types of asynchronous operations”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Main types of asynchronous operations in JavaScript

| # | Operation type | Where it runs | Examples |
|---|---|---|---|
| 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 | **Events (Event listeners)** | Web API / DOM | `addEventListener`, click, key, and scroll events |
| 4 | **Promises and microtasks** | JS engine (inside the Event Loop) | `Promise.then`, `async/await`, `queueMicrotask` |
| 5 | **Rendering and animations** | Web API (browser) | `requestAnimationFrame`, `IntersectionObserver`, `MutationObserver` |
| 6 | **Web Workers / Node Workers** | A separate thread | `new Worker()`, `postMessage`, `onmessage` |
| 7 | **File / stream operations** *(Node.js)* | Node API | `fs.readFile`, `stream.on('data')` |

---

## 1. Timers (`setTimeout`, `setInterval`)

Asynchronous operations that run **after a given interval of time**.

```javascript
setTimeout(() => console.log('After 2 seconds'), 2000);
setInterval(() => console.log('Every 3 seconds'), 3000);
```

After the specified time, the callback lands in the **macrotask queue**.

---

## 2. Network operations (`fetch`, `XHR`)

Asynchronous requests to the server. JS does not wait for the response: the request goes "into the background".

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

When the response arrives, the promise resolves → a **microtask** is created that handles `.then()`.

---

## 3. DOM events (`addEventListener`)

Event callbacks fire **asynchronously**, when the user interacts with the page.

```javascript
button.addEventListener('click', () => {
  console.log('Click!');
});
```

The callback lands in the **macrotask queue** on every event.

---

## 4. Promises and microtasks (`Promise`, `queueMicrotask`, `async/await`)

Asynchronous operations **inside the JS engine itself**.
They run **earlier** than timers: right after the current code.

```javascript
Promise.resolve().then(() => console.log('Microtask'));
queueMicrotask(() => console.log('Another microtask'));
```

These tasks land in the **microtask queue**, which has higher priority.

---

## 5. Animations and rendering (`requestAnimationFrame`, `MutationObserver`)

Let you perform actions **in sync with browser frames** (60 FPS).

```javascript
requestAnimationFrame(() => console.log('Before the frame is repainted'));
```

These callbacks run **before the screen is redrawn**, so DOM updates stay smooth.

---

## 6. Web Workers (parallel threads)

Let you run heavy computations **on a separate thread**, without blocking the UI.

```javascript
const worker = new Worker('worker.js');
worker.postMessage('Hello!');
worker.onmessage = e => console.log(e.data);
```

This is a **genuinely parallel thread**, but interacting with it is asynchronous (through messages).

---

## 7. Node.js: the file system and streams

Node.js has many asynchronous APIs: file reading, network connections, and so on.

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

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

Such operations run in a **thread pool (libuv)**, and the result is returned asynchronously.

---

## Visually (a simplified Event Loop diagram)

```javascript
┌────────────────────────────────────────────┐
│            External APIs (Web/Node)        │
│────────────────────────────────────────────│
│ setTimeout | fetch | events | fs.readFile  │
└────────────┬────────────┬────────────┬──────┘
             │            │            │
     ↓       ↓            ↓            ↓
┌────────────────────────────────────────────┐
│            Macrotask queue (Tasks)         │
└────────────────────────────────────────────┘
     ↓
┌────────────────────────────────────────────┐
│           Microtask queue (Microtasks)     │
└────────────────────────────────────────────┘
     ↓
┌────────────────────────────────────────────┐
│           Call Stack (execution)           │
└────────────────────────────────────────────┘
```

---

## Summary

| Category | Examples | Queue |
|---|---|---|
| Timers | `setTimeout`, `setInterval` | Macrotasks |
| Network | `fetch`, `XHR`, `fs.readFile` | Macro → then a microtask on `.then` |
| Events | `click`, `scroll`, `input` | Macrotasks |
| Promises | `Promise.then`, `queueMicrotask` | Microtasks |
| Animations | `requestAnimationFrame`, `MutationObserver` | Special queue before the frame |
| Web Workers | `Worker` API | Parallel, but communication is asynchronous |
| Node.js | `fs`, `stream`, `net`, `dns` | Macrotasks / internal libuv queues |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts592 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.