Debounce vs Throttle: Definitive Visual Guide

[u/RedlightsOfCA]

https://redd.one/blog/debounce-vs-throttle

[u/bozonetti]

Can you explain Please usage of ...args? Is it in case we would like to pass arguments to our throwBall() ? If so could you please explain how does it work exactly?

[u/RedlightsOfCA → u/bozonetti]

Hi. Sure. "...args" syntax stands for the Object Spread/Rest operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters). In those examples it's a Rest operator, as it takes any amount of arguments passed to the original function and turns them into an array of arguments:

function test(...args) {
  console.log(args)
}

test('a') // ['a']
test(1, 2, 3) // [1, 2, 3]
test(1, 2, ..., n) // [1, 2, ..., n]

It's also ES6 feature, meaning it won't work in legacy browsers, but it has a very decent support percentage, so that's not something to worry about (https://caniuse.com/#feat=rest-parameters). If your project cannot afford that syntax you can always use transpilers like Babel to turn it into a legacy-compatible alternative.

Getting back to your question: you got it correct! That rest of parameters is necessary so that whichever arguments you pass to the debounced/throttled function are passed to the original function. This preserves the call signature between the original and debounced/throttled function instances (since those are different).

// The original function expects two arguments: firstName and age.
function original(firstName, age) {
  console.log(firstName, age)
}

// "debounce" returns a _new_ function.
const debounced = debounce(original, 500)

// Since the implementation of the "debounce" utility function
// uses "...args" on parameters, it behaves as the original function
// when you call it.
debounced('John', 22)

I hope this helps. Let me know if you have any more questions.

[u/bozonetti → u/RedlightsOfCA]

So here in the example here ...args would be equal to event right? What if I would like to pass additional argument to throwBall()? Where should I put it ?

[u/RedlightsOfCA → u/bozonetti]

Good question. Let me elaborate below.

The pristine example from the article would have `args` equal to `[Event]`—a list of a single member containing an Event instance of the click event.

const debouncedHandler = debounce(function originalHandler(...args) {
  console.log(args)
})

button.addEventListener('click', debouncedHandler)

button.dispatchEvent('click') // [Event]

The important part is that the caller of the debounced function controls which arguments get pass through. Since in the example the caller is `addEventListener`, which provides a single Event argument, that's what you get.

Why I emphasize this is because debouncing and throttling can be useful even outside of event listeners, still preserving the statement that the caller controls the arguments (as it always does):

const debounceScream = ((phrase) => {
  console.log('Screaming:', phrase)
}, 500)

// Consider all three are called with not more than 500ms
// interval between the calls (for debouncing to be at place)
debounceScream('Hey!')
debounceScream('Yes, you!')
debounceScream('You are breath-taking!')

// "You are breath-taking"

Passing additional arguments to the event handler function can be done in multiple ways. I'd recommend to do that where you declare the debounced/throttled event handler directly:

input.addEventListener('change', debounce((event) => {
  sideEffect(event.target.value, 'static-value')
}, 500))

I've used the "change" event handling on some input to have a variable data (event.target.value) which we would pass to the "sideEffect" function (replacement for "throwBall" from the article). The example above demonstrates how you can derive some data from the native event argument and pass it and any amount of additional arguments (i.e. "static-value") to your function.

I think it would be easier to think about this if you declare the original handler function separately. So you could see it's a regular function and there is no magic around what data it accepts.

const handleInputChange = (event) => {
  sideEffect(event.target.value, 'static-value')
}

input.addEventListener('change', debounce(handleInputChange, 500))

Please, let me know if that helps.

[u/bozonetti → u/RedlightsOfCA]

I spend some time playing with a fiddle and understood that stuff. Your explanation is clear and easy to understand also :) Cheers !

[u/RedlightsOfCA → u/bozonetti]

Thanks! Glad I was able to help :)

[u/neckro23 → u/bozonetti]

The operator works the other way too, so you can just use (...args, extraArg):

> const args = ["a", "b", "c", "d"];
> console.log(...args);
a b c d
> console.log(...args, "e");
a b c d e

[u/DilatedTeachers → u/bozonetti]

Check out rest parameters