When should you use throttle?

VueJunior~2 min read

Throttle is used when you need to reduce how often a function is called, limiting its execution to, for example, no more than once every X milliseconds, even if the event fires much more often.

In simpler terms:

Throttle is needed when events fire very quickly, but you need to react regularly rather than on every single call.

When should you use throttle?

Here are the main situations expected at an interview.

1. Scroll

The scroll event can fire dozens of times per second.

For example:

updating element positions
calculating reading progress
loading the next batch of data (infinite scroll)

Throttling reduces the load:

window.addEventListener('scroll', throttle(handleScroll, 100))

2. Window resize

resize can fire hundreds of times while the user drags the window.

Use throttle for:

recalculating element sizes
rebuilding the layout
responsive actions

3. Mouse handlers

For example, with:

mousemove
drag
drawing on a canvas
dragging objects

Thousands of events fire → throttling is mandatory.

4. Tracking cursor position

If you need to update coordinates with a limit:

window.addEventListener('mousemove', throttle(updatePosition, 50))

5. Timer-based autosave

If the user types quickly into a form:

debounce is suited for sending a request
throttle is suited for periodic autosaving while the user keeps typing

For example, saving once every 2 seconds.

Difference from debounce (a very important point)

Tool	When it fires
Debounce	After the user has stopped typing/scrolling
Throttle	Regularly, but not more often than the specified interval

Example:

Debounce, search after the user has stopped typing.
Throttle, update the scroll progress once every 100ms.

An example of throttling with Lodash

import throttle from 'lodash/throttle'

const onScroll = throttle(() => {
  console.log('scrolling...')
}, 200)

An example of a custom implementation

function throttle(fn, delay) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= delay) {
      last = now
      fn.apply(this, args)
    }
  }
}

A short answer for interviews

Throttle is used when it matters to react to an event regularly, but not more often than a set interval. Examples: scroll, resize, mousemove, drag, periodic autosave. This reduces the load on rendering and prevents UI lag.

Short Answer

Interview ready

Premium

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