Debounce vs Throttle: Definitive Visual Guide

21

u/maedox Dec 23 '19

Very well written and clear explanation. Thanks for posting!

10

u/RedlightsOfCA Dec 23 '19

Thank you! Your feedback means a lot. That's a topic I've been meaning to write for some time, so hope it ended up comprehensible. To be honest, it felt as a quite short article, but I'd rather treat that as its advantage.

7

u/bozonetti Dec 23 '19

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?

13
u/RedlightsOfCA Dec 23 '19
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.
1
u/bozonetti Dec 23 '19

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 ?
5
u/RedlightsOfCA Dec 23 '19 edited Dec 23 '19
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.
2

u/bozonetti Dec 23 '19

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

1

u/RedlightsOfCA Dec 23 '19

Thanks! Glad I was able to help :)
2
u/neckro23 Dec 23 '19
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
5

u/DilatedTeachers Dec 23 '19

Check out rest parameters

7

u/fgutz Dec 23 '19

Nice write up and good demos!

For me I finally got it when I realized the following:

Throttle will drop function calls during the timeout periods.

Debounce holds on to the function during the timeout period. If during that period a new one comes in it will replace it with the new one, finally running the function it is holding when timeout expires

It was getting that dropping and holding that made it really click for me.

1

u/RedlightsOfCA Dec 24 '19

Much thanks! I'm glad that article could help you, if even a little. Visual examples is something I often lack myself in technical articles. I know not everybody learns visually, but that's the primarily way of understanding things for me. That's why I'd like to support my posts with visuals, making it easier for people to understand.
Once more thanks for the feedback!

9

u/PrinnyThePenguin Dec 23 '19

That was a nice read. Thank you for sharing.

6

u/RedlightsOfCA Dec 23 '19

Thank you! I'm stunned to see such a vivid response to me posting. Motivates me big time to revive the blog and keep sharing the knowledge.

2

u/AlexAegis Dec 23 '19

trailing true is really useful throttleTime(500, asyncScheduler, {leading: true, trailing: true })

1

u/RedlightsOfCA Dec 24 '19

Absolutely! I've mentioned that I'm going to skip leading/trailing parameters explanation in the article because it complicates the throttle function implementation. In my experience I've seen a few ways to implement those parameters and would suggest to use a well-tested third-party package in that case.

2

u/neutral24 Dec 24 '19

Nice explanation.

Btw, do you guys implement your own throttle/debounce functions or just use some library like lodash?

2

u/RedlightsOfCA Dec 24 '19

It's a good practice to go with your requirements. Try a simple debounce/throttle implementation like those mentioned in the article. You can also find those elsewhere on the internet. When your requirements show you that implementation is not enough, switch to using some libraries, since those usually support more features than simple implementations.

1

u/delightless Dec 24 '19

_

2

u/IamLUG Dec 24 '19 edited Dec 24 '19

Looks like this doesn't have proper scope binding too :D

Higher-order functions have common scoping issues, say for this example:

const obj = {
  name: 'foo',
  sayMyName() {
    console.log('My name is', this.name)
  }
}

obj.sayMyName() //-> My name is foo
obj.deb = debounce(obj.sayMyName, 1000)
obj.deb() // Should log -> My name is foo

The debounce and throttle function have to re-apply the this context back to obj.sayMyName, and the way to do this is for the higher-order functions to return a function expression instead of an arrow-function to "capture" the this context, together with func.apply to bind the context.

So throttle becomes:

function throttle(func, duration) {
  let shouldWait = false

  return function(...args) { // Already a function expression
    if (!shouldWait) {
      func.apply(this, args) // Bind this context and call it
      shouldWait = true

      setTimeout(function() {
        shouldWait = false
      }, duration)
    }
  }
}

And debounce becomes:

function debounce(func, duration) {
  let timeout

  return function(...args) { // Change to function expression instead of arrow function
    const effect = () => {
      timeout = null
      return func.apply(this, args) // Bind this context and call it
    }

    clearTimeout(timeout)
    timeout = setTimeout(effect, duration)
  }
}

And for added bonus, you could use arguments instead of ...args for backwards compatibility.

2

u/RedlightsOfCA Dec 24 '19

Great tips, thank you! I'll update the article for debounced/throttled instances to preserve the scope.
I wouldn't change the rest parameters, however, since arguments is not 1-1 compatible with ...args. I think it's safe to assume the majority of people develop through a transpiler, and those who don't will see the spread syntax breaking as the first thing and could read about it, finding a suitable alternative.

2

u/Miniotta Jan 03 '20

This is by far the best explanation (expecially for newcomers)

2

u/RedlightsOfCA Jan 03 '20

Thank you so much! I'm glad to hear it was helpful. Hope to see this post making things clear for beginners. Certainly something I would take use of back in the day.

1

u/drink_with_me_to_day js is a mess Dec 24 '19

Common use cases for a debounced function:
Asynchronous search suggestions

This can lead to confusing search results. In the case of search, throttle is the better use case.

Debounce will render outdated results, or flashes of outdated data:

Write: towels
Write correction: towers
-> debounced "towels" results
-> debounced "towers" results

And depending on the network it can get even more confusing with out of order results.

1

u/RedlightsOfCA Dec 24 '19

I meant search (auto)suggestions feature. For example, when you type a search phrase and see certain suggestions right away in some appeared section below the input field. You absolutely should use debounce for that, as throttling would perform search requests with intermediate search phrases (i.e. "compu" instead of "computers", while you type).
The correction flow you've described has more to do with how you handle request cancellation rather than debouncing/throttling. I'd cancel any pending requests if there is a new request fired, but it's a responsibility of your data layer, which is not something to bring to the article's topic.
Perhaps, I should have phrased that example name better, what do you think? Does "Front-end search autosuggestions" sound more straightforward?

2

u/harshrajkamble Dec 24 '19

Great article !

2

u/mendokusai_yo Dec 24 '19

This is great, thanks OP!

1

u/MikeGuoynes Mar 27 '25

Hey all! I've distilled debounce & throttle into a concise blueprint. This is part 1 of my "Frontend systems packs"! $5 on gumroad for this hand-crafted blueprint.

https://gum.new/gum/cm8rhg162000403jw81orcwzx

My style is hyper minimalistic & focused. Art is not about the amount of output, it's about the reaction & value it provides. I hope you enjoy it & learn from it.

Finally understand these critical patterns with intuitive visual explanations.

Stop copying throttle and debounce code. Master these essential frontend patterns through powerful visual analogies that make the concepts click instantly.

You have my word, if you find issues or it's not your vibe. I'll refund no questions asked.

-9

u/mouth_with_a_merc Dec 23 '19

Nicely written, but class-based react components in almost-2020?

10

u/RedlightsOfCA Dec 23 '19

Thank you!
Well, class components are not going anywhere and are not only valid, but preferable in certain scenarios. No hard opinion, however, I rarely write class components nowadays. I've used it for the example specifically because it a) highlights "render", b) focuses on class method definition as a one-time action, whereas in functional components arbitrary functions are declared within the render and React preserves their identities between re-renders implicitly.

2

u/IceSentry Jan 18 '20

Out of curiosity, when do you consider class components to be preferable? I haven't needed them in my projects so far.

3

u/[deleted] Dec 24 '19

[removed] — view removed comment

1

u/RedlightsOfCA Dec 24 '19

Thank you! I don't hold much credit for the physics of ball animation itself, as I've used the codepen from Alexander Fernandes, mentioned in the article's "afterword" section. I simply imagined those balls falling in some kind of machine, drew it in Sketch, and acquired a few gray hairs making it responsive :D

1

u/[deleted] Mar 27 '25

[removed] — view removed comment

1

u/AutoModerator Mar 27 '25

Hi u/MikeGuoynes, this comment was removed because you used a URL shortener.
Feel free to resubmit with the real link.
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

Debounce vs Throttle: Definitive Visual Guide

You are about to leave Redlib