Throttle & Debounce Functions

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

Solution 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.

Solution 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.

Solution 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:

functionthrottle(func, wait, options) {
  let leading = truelet trailing = trueif (typeof func != 'function') {
    thrownewTypeError('Expected a function')
  }
  if (isObject(options)) {
    leading = 'leading'in options ? !!options.leading : leading
    trailing = 'trailing'in options ? !!options.trailing : trailing
  }
  returndebounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  })
}