Types of asynchronous operations

JavaScriptJunior~2 min read

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.