I am a bit uncertain with the concepts of throttle and debounce functions.

As I get it:

we debounce a function that should be called after a certain event has happened. It is used in events like drag, keyup, etc. with the purpose of not firing all the time the event gets fired but instead when the series of events is done. Typically after a whole word has been typed, or a drag or resize sequence has ended.

we throttle a function that should fire while a series of events is happening, but when we want to control the amount of times it gets called. Like in a drag movement we want the function to be called only every x pixels of distance, or only every 100ms, and not every time the event is fired. So the throttle function is called while the series of events is happening, just fewer times.

Question:

is this a correct perception of what these functions are and their purpose? are there other features that distinguish them?

I am a bit uncertain with the concepts of throttle and debounce functions.

As I get it:

we debounce a function that should be called after a certain event has happened. It is used in events like drag, keyup, etc. with the purpose of not firing all the time the event gets fired but instead when the series of events is done. Typically after a whole word has been typed, or a drag or resize sequence has ended.

we throttle a function that should fire while a series of events is happening, but when we want to control the amount of times it gets called. Like in a drag movement we want the function to be called only every x pixels of distance, or only every 100ms, and not every time the event is fired. So the throttle function is called while the series of events is happening, just fewer times.

Question:

is this a correct perception of what these functions are and their purpose? are there other features that distinguish them?

• javascript
• function
• throttling
• debouncing

• 3 Ben Alman's post on throttle vs debounce has some useful visualizations. – zzzzBov Commented May 13, 2015 at 18:52
• @zzzzBov interesting reading. Thank you. – Rikard Commented May 13, 2015 at 18:54
• Possible duplicate of Difference Between throttling and debouncing a function – Ryan Taylor Commented Oct 22, 2019 at 16:09

3 Answers 3

For short:

throttle is designed to call function in certain interval during constant call. Like: window.scroll. debounce is designed to call function only once during one certain time. not matter how many time it called. Like: submit button click. Here is the example:

//http://jsfiddle/1dr00xbn/

you can see the difference.

Yes, that's a good synopsis of the differences.

However, you might want to emphasize that these methods don't actually alter the functions they are called upon. They just create a new function (with an identity, to which the rate limiting behaviour is bound) that can be called as often as necessary, and internally relays the calls to the debounced or throttled function.

As my TL pointed out today, It is worth mentioning that in the popular implementation of this 2 functions in lodash:

• https://github./lodash/lodash/blob/master/debounce.js
• https://github./lodash/lodash/blob/master/throttle.js

The throttle function is actually just a specific configuration of debounce:

function throttle(func, wait, options) {
  let leading = true
  let trailing = true

  if (typeof func != 'function') {
    throw new TypeError('Expected a function')
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading
    trailing = 'trailing' in options ? !!options.trailing : trailing
  }
  return debounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  })
}