Throttle & debounce functions

Question

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?

Answer 1

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.

Answer 2

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.net/1dr00xbn/

you can see the difference.

Answer 3

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

• https://github.com/lodash/lodash/blob/master/debounce.js
• https://github.com/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
  })
}