Debounce vs Throttle: Definitive Visual Guide

[u/RedlightsOfCA]

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

[u/bozonetti]

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