What does "throttle" do?

JavaScriptJunior~2 min read

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

On the first call, the function runs immediately.
The time of the last call is stored (lastCall).
All subsequent calls are ignored until delay milliseconds have passed.
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

Updating a progress bar on scroll:

javascript

window.addEventListener(
  "scroll",
  throttle(() => {
    progressBar.value = window.scrollY;
  }, 100)
);

Tracking the mouse position for an animation:

javascript

window.addEventListener(
  "mousemove",
  throttle(updateCursorPosition, 50)
);

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

Short Answer

Interview ready

Premium

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