Suggest an editImprove this articleRefine the answer for “When should you use throttle?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Throttle** is used when you need to reduce how often a function is called, limiting its execution to no more than once every X milliseconds, even if the event fires much more often. **Key point:** unlike debounce, which waits for the event to stop, throttle reacts regularly - for example, for scroll, resize, or mousemove.Shown above the full answer for quick recall.Answer (EN)Image**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: ```js 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: ```js 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 ```js import throttle from 'lodash/throttle' const onScroll = throttle(() => { console.log('scrolling...') }, 200) ``` --- ## An example of a custom implementation ```js 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.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.