Suggest an edit

Improve this article

Refine the answer for “Infinite loop”. 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)

## Short answer

If a function has an **infinite loop**, JavaScript **will never free the call stack**, and the **event loop will stop** - no other tasks (timers, promises, clicks, UI repaints) will be able to run.
As a result, the page **"hangs"**.

---

## Example

```javascript
function infinite() {
  while (true) {
    console.log('forever...');
  }
}

infinite();
```

### What happens:

1. The `infinite()` function lands on the **call stack**.
2. The `while (true)` loop starts running - it **never finishes**.
3. The engine **never exits** the function, so:
  - the stack **never frees up**,
  - the event loop **can't pick up the next task**,
  - the browser **stops responding** (clicks, scrolling, even DevTools can "freeze").

---

## Why this happens

JavaScript is a **single-threaded language**.
It can run **only one piece of code** at any given moment (whatever is on the **call stack**).

Until the function finishes, the engine **won't switch** to other tasks, whether that's `setTimeout` or `Promise.then`.

---

## Example with a timer (that will never fire)

```javascript
setTimeout(() => console.log('I will not run'), 0);

while (true) {} // infinite loop
```

Explanation:

- `setTimeout` puts the callback into the **macrotask queue**;
- But while `while(true)` is running, **the stack does not free up**;
- The event loop cannot take a task from the queue;
- `console.log('I will not run')` **never executes**.

---

## Summary

| Consequence | Description |
|---|---|
| **Stack blocked** | Code never exits the function -> the stack never frees up |
| **Event loop stops** | Task queues (timers, promises) are not processed |
| **Page hangs** | The UI doesn't repaint, the browser may show "Page unresponsive" |
| **No response to events** | Clicks, scrolling, input don't work |

---

## How to avoid blocking

Use asynchrony or break work into chunks:

### Option 1: `setTimeout`

```javascript
function loop() {
  console.log('iteration');
  setTimeout(loop, 0); // gives the engine a "breather"
}
loop();
```

### Option 2: `requestAnimationFrame`

Good for visual tasks (animations):

```javascript
function animate() {
  // draw a frame
  requestAnimationFrame(animate);
}
animate();
```

### Option 3: Web Worker (if you need heavy computational logic)

Move the computation to a separate thread:

```javascript
// worker.js
onmessage = e => {
  while (true) {} // can run long - the UI won't hang
};
```

---

## Conclusion

| Term | Explanation |
|---|---|
| **Infinite loop in a function** | Never exits the call stack |
| **Consequence** | The event loop blocks, the browser "freezes" |
| **Solution** | Split work into chunks (`setTimeout`, `requestAnimationFrame`, Web Workers) |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.