Stop 04 · JavaScriptTopics · 24/36

Throttling

In short

Scroll and mousemove can fire dozens of times a second. Throttling lets your function run at most once per time window, however wildly the user scrolls.

A technique that limits a function to running at most once per fixed time interval, regardless of how often it's triggered — common for scroll/resize handlers. Throttling is useful when updates should continue during a burst but must be rate-limited, such as tracking scrolling or pointer movement.

The jaadu mascot as a ticket clerk serves one passenger while a queue waits.

Think of it like this

The station ticket window

The ticket clerk serves one person, then takes a breather before the next, however hard the crowd pushes. Pushing doesn't make it faster. Throttling is that clerk: one run per time window, everything else in that window is turned away.

Watch it happen

Scroll events with throttle(fn, 500)

0ms

last

100

200

300

400

500

600

700

800

1000

1/4First scroll event at 0 ms. Nothing ran before, so fn runs and last = 0.

The big ideas

What you need to know

A steady rhythm

Throttle runs regularly during a burst, say every 200 ms. Debounce waits for the burst to end and runs once.

Good for continuous actions

Scroll position, progress bars, dragging, checking if you're near the bottom of a page.

Mind the last call

A simple throttle can skip the final event. Add a trailing call if the final value matters.

For animations, use rAF

requestAnimationFrame runs your code once per screen refresh, which is ideal for anything visual.

See it in code

Walk through the code

1function throttle(fn, interval = 200) {2  let last = 0;3  return (...args) => {4    const now = Date.now();5    if (now - last >= interval) {6      last = now;7      fn(...args);8    }9  };10}11 12const onScroll = throttle(() => {13  console.log("Scroll Y:", window.scrollY);14}, 500);15 16window.addEventListener("scroll", onScroll);

1/4last remembers when fn last ran. It starts at 0.

This version runs on the first event, then ignores everything until 500 ms have passed. Libraries like lodash also offer a trailing call at the end.

Save yourself the pain

Common mistakes

Oops

Using debounce for a scroll progress bar.

Do this instead

The bar would only move after you stop scrolling. Use throttle so it updates while you scroll.

Oops

Expecting this simple throttle to always catch the final scroll position.

Do this instead

It may skip the last event. Add a trailing setTimeout or read the position again when scrolling ends.

Your mission

Scroll meter

~20 min

Quick check

You scroll non-stop for 2 seconds. The handler is throttled to 500 ms. Roughly how many times does it run?

Go deeper

1Implement a throttle function from scratch and apply it to a scroll listener. Validate your understanding by applying it in a small practical example.
2Compare debounce vs throttle behavior with a visual demo. Write down when you would choose each option and what trade-off drives that choice.
3Identify 2-3 real UI scenarios where throttling, not debouncing, is the right tool.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download