Throttling

Pronunciation: THROT-ling

Updated October 5, 20262 min read

In short

Throttling makes a function run at most once per interval, however often it is called, so scroll and resize handlers update steadily without running every time.

What is throttling?

Scrolling, resizing, moving the mouse or dragging can fire an event dozens of times a second. If each one runs expensive code, such as measuring the layout or sending a request, the page stutters. A throttled function runs the first time it is called, then ignores further calls until the interval, say 100 milliseconds, has passed, and keeps running at most once per interval while the calls keep coming.

Throttling is often confused with debouncing. Debouncing waits until the events stop and then runs once, which suits search-as-you-type; throttling keeps running at a steady pace while the events continue, which suits anything that should update during the action, such as an infinite-scroll check, a header that shrinks on scroll or a position shown while dragging. Many throttle helpers also run one last time at the end, so the final state isn't missed.

For visual updates, browsers offer a built-in alternative: requestAnimationFrame runs a callback before the next paint, usually 60 times a second, so updates line up with the screen. The word throttling is used elsewhere too: servers throttle clients with rate limits, browsers throttle timers in background tabs, and processors slow themselves down when they get too hot.

Key takeaways

Throttling runs a function at most once per interval, however often it is called.
It suits continuous actions such as scrolling, resizing and dragging.
Debouncing waits for the events to stop; throttling keeps a steady pace while they continue.
For visual updates, requestAnimationFrame paces the work to the screen's refresh.

Example

A simple throttle in JavaScriptjavascript

function throttle(fn, interval) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) { // skip calls that come too soon
      last = now;
      fn(...args);
    }
  };
}

// Check at most every 100 ms whether to load more, however fast the user scrolls
window.addEventListener("scroll", throttle(() => {
  if (window.scrollY + innerHeight > document.body.scrollHeight - 500) loadMore();
}, 100));

Readers ask

What is the difference between throttling and debouncing?

Throttling runs the function regularly during a burst of events, at most once per interval. Debouncing runs it once, after the burst has stopped. Throttle when the user should see updates during the action, and debounce when only the final value matters.

Is throttling the same as rate limiting?

They share the idea of capping how often something happens. Rate limiting usually means a server refusing or delaying a client's requests beyond a limit, while throttling a function is something code does to itself, in the browser or anywhere else.

Often compared

Debounce vs ThrottleDebounce waits until a burst of events stops, then runs the function once, while throttle runs it at most once per interval as the events continue.

Sources

MDN: Throttledeveloper.mozilla.org(opens in a new tab)

Spotted a mistake or something missing on this page?Suggest an edit