Suggest an edit

Improve this article

Refine the answer for “What does "throttle" do?”. 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)

## What `throttle` does

**Throttle** is a technique that **limits how often a function is called**:
even if an event fires **very frequently**, the function will run **no more often than once per given time interval**.

In simple terms:

> "Call the function no more often than **once every N milliseconds**."

---

## Example without throttle

Suppose you want to track how the user moves the mouse:

```javascript
window.addEventListener("mousemove", () => {
  console.log("mouse move");
});
```

The problem:

- `mousemove` can fire **dozens of times per second** (up to 100-200 times a second!);
- the function will be called too often;
- CPU load rises -> performance suffers.

---

## With throttle

```javascript
function throttle(fn, delay) {
  let lastCall = 0;

return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const handleMove = throttle(() => {
  console.log("Mouse move handled!");
}, 500);

window.addEventListener("mousemove", handleMove);
```

Now `handleMove` will be called **no more often than once every 500 ms**,
even if `mousemove` fires hundreds of times.

---

## How it works internally

1. On the first call, the function runs immediately.
2. The time of the last call is stored (`lastCall`).
3. All subsequent calls are **ignored** until `delay` milliseconds have passed.
4. After the time window, the function can be called again.

---

## Difference from "debounce"

| Feature | **Throttle** | **Debounce** |
|---|---|---|
| Goal | Limit call frequency | Defer execution until the user "stops" |
| Called | Regularly, but no more often than every N ms | Only once, after a pause |
| Example | `scroll`, `mousemove`, `resize` | `input`, `search`, `autocomplete` |
| Behavior | "No more often than" | "No sooner than" |

Example:

- **Throttle** - while scrolling the page, update the position every 100 ms.
- **Debounce** - wait until the user finishes typing, and only then make the request.

---

## Real-life example

1. **Updating a progress bar on scroll:**

```javascript
  window.addEventListener(
    "scroll",
    throttle(() => {
      progressBar.value = window.scrollY;
    }, 100)
  );
  ```
2. **Tracking the mouse position for an animation:**

```javascript
  window.addEventListener(
    "mousemove",
    throttle(updateCursorPosition, 50)
  );
  ```
3. **Recalculating window dimensions (**`resize`**):**

```javascript
  window.addEventListener(
    "resize",
    throttle(updateLayout, 200)
  );
  ```

---

## Throttle in Lodash

Many projects use the ready-made version from Lodash:

```javascript
import { throttle } from "lodash";

const throttled = throttle(() => {
  console.log("scroll!");
}, 300);

window.addEventListener("scroll", throttled);
```

The Lodash version is more advanced -
it can call the function **at the start and/or the end** of the interval (`leading`, `trailing`).

---

## Summary

| Item | Description |
|---|---|
| What it does | Limits how often a function is called |
| When to use it | On frequent events: `scroll`, `resize`, `mousemove` |
| Arguments | A function and a delay (ms) |
| Returns | A new "wrapped" function |
| Benefit | Reduces CPU load, improves performance |
| Difference from debounce | Runs regularly, but no more often than the given interval |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.