Throttling originally meant slowing down the rate of fluid flow using an obstruction. In the context of programming, it refers to slowing down a process such that an operation can only be performed at a certain rate.

Throttling is very similar todebouncing. The key difference is that when invocations happen continuously, throttling ensures that the operation is still performed at a certain maximum rate, while debouncing waits indefinitely until the invocations stop for a certain amount of time.

A typical use case of throttling is when synchronizing with another constantly-updating state. Consider a functiononScrolled, which listens for thescroll event. Thescroll event may fire as often as every pixel scrolled, so the function will be called in very short intervals. IfonScrolled is computationally expensive, earlier invocations might block later invocations from happening on time, or block other things from executing in the meantime, leading to a noticeablejank. In this case, we can throttleonScrolled, such that it can only be called at most once every 10 milliseconds:

1. The first call toonScrolled is known as theleading edge.
2. For every next call toonScrolled, if it is within 10 milliseconds from the first call, it is in the same "batch" as the first call.
3. After 10 milliseconds have elapsed from the first call toonScrolled, we have reached thetrailing edge.

Usually,onScrolled is executed once on the leading edge only, although sometimes it might be executed on the trailing edge, or even both edges, depending on the specific use case. If executed on both edges, the throttling implementation usually also ensures that the next leading edge invocation doesn't fire at least 10 milliseconds after the previous trailing edge.

Via throttling, the effect ofonScrolled is still continuously updated and applied — for example, if it moves another DOM element based on the document's scroll position, that DOM element is still continuously moved while the page is scrolling — but it isn't executed more often than necessary.

Network throttling means to simulate a slower network connection by only allowing a certain amount of data to be transferred at a time.Throttling a timer means to coarsen the timer's precision such that when reading the timer (such asDate.now()) continuously, the timer's value only changes at a certain maximum rate. Both are specific applications of the general concept of throttling.

See also

• Glossary terms:
  • Debounce
  • Rate limit
• Debouncing and Throttling Explained Through Examples on CSS-Tricks (April 6, 2016)