What is throttle?

Throttle is a technique that limits how often a function can fire, no matter how many times it gets triggered.

If you attach a function to a scroll or resize event, the browser can fire it hundreds of times per second as the user scrolls. Throttle puts a cap on that. If you throttle a function to once every 100ms, it will fire at most 10 times per second, no matter how fast the user is scrolling. This keeps performance smooth without dropping the behavior entirely.

Throttle is closely related to debounce, but they work differently. Debounce waits until the user stops triggering an event and then fires once. Throttle fires at a steady rate while the event keeps happening. A search box that waits for you to stop typing is debounce. A scroll handler that updates a progress bar as you scroll is throttle.

A good way to think about the difference is that debounce means “wait until things calm down, then act,” while throttle means “act, but no more than once every X milliseconds.”

I’ve used throttle and its cousin debounce hundreds of times in front-end development. Once you understand both, you’ll find yourself reaching for them constantly whenever you need to keep the browser from doing too much work.