Blocking operation

JavaScriptJunior~2 min read

In short

When a blocking operation happens in JavaScript, the event loop waits until it finishes, which means the whole interface "freezes", buttons stop responding, and animations and network requests are not processed.

Example of a blocking operation

javascript

console.log('A');

function block(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

block(3000); // block the thread for 3 seconds

console.log('B');

Output:

javascript

A
(3-second pause)
B

While while is running, JS cannot do anything else: it cannot process clicks, run timers, or update the interface. This is exactly what blocking is.

Why this happens

JavaScript runs on a single thread: at any given moment, the Call Stack can be executing only one task.

When long-running code lands there, it occupies the whole thread, and the rest of the tasks (including asynchronous ones) wait until it finishes.

Even if you have a setTimeout, it will not run until the stack is free.

Visually

javascript

┌──────────────────────┐
│ Call Stack           │ ← running a blocking operation
│ (busy for a while)   │
└──────────────────────┘
       ↓
Event Loop waits
Callback queue waits

No asynchronous task can enter the stack until the blocking one finishes.

Examples of typical blocking operations in JS

Operation	Why it blocks
A long `while` / `for`	occupies the processor
Heavy computations (recursion, sorting, cryptography)	blocks the thread
`alert()`, `prompt()`	stops script execution
`sync` versions of Node.js methods (`fs.readFileSync`)	wait for the result
Long JSON conversions (`JSON.stringify(huge_object)`)	run synchronously

What happens to asynchronous code during blocking

javascript

console.log('1');

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

const start = Date.now();
while (Date.now() - start < 3000) {} // blocking loop, 3 sec

console.log('3');

Output:

javascript

1
(3-second pause)
3
2

setTimeout(..., 0) did not help: its callback was placed into the queue, but it could not run until the stack was freed after the while loop.

How to avoid blocking

Split large tasks into chunks (via setTimeout / requestIdleCallback):

javascript

function bigTask() {
  for (let i = 0; i < 1e9; i++) {
    if (i % 1e6 === 0) console.log(i);
  }
}

setTimeout(bigTask, 0); // runs asynchronously, without blocking the interface

Use Web Workers - for heavy computations on a separate thread:

javascript

// worker.js
onmessage = (e) => {
  const result = e.data ** 2;
  postMessage(result);
};

In Node.js - use fs.promises instead of fs.readFileSync.

A real-life example

Imagine you have one waiter (the JS thread):

Blocking code - the waiter waits for a dish to be cooked and does not serve anyone else.
Non-blocking - they hand the order to the kitchen and go serve the next table.

JavaScript is like the second option. But if the waiter starts "stirring the soup" themselves for 10 minutes (CPU-heavy code), service comes to a halt.

Summary

Term	What it means
Blocking operation	A task that stops the rest of the code from running
Result	The event loop "freezes", the UI stops responding
Examples	Long loops, sync functions, alert(), heavy computations
How to avoid it	Asynchronous APIs, Web Workers, splitting tasks

Short Answer

Interview ready

Premium

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