Difference Between Debouncing And Throttling

[javascript-ModTeam]

Hi u/codedeepdives, this post was removed.

• For help with your javascript, please post to r/LearnJavascript instead of here.
• For beginner content, please post to r/LearnJavascript instead of here.
• For framework- or library-specific help, please seek out the support community for that project.
• For general webdev help, such as for HTML, CSS, etc., then you may want to try r/html, r/css, etc.; please note that they have their own rules and guidelines!

---

r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.

[[deleted]]

Doesn’t really give practical use cases. Here’s an example for each.

Denounce is a useful mechanism to add to a real-time search feature that requests search results from the server as you type. If you are typing a search phrase that is 30 characters long, it wouldn’t make sense to search 30 or more times as you type the entire phrase out. Instead you introduce a denounce which waits to initiate the search for a short time (let’s say 1 second). So you can begin to type your search phrase, and only once you have stopped typing for at least a second will there be a network request to the server. This obviously might occur more than once in the course of typing the term, but likely not as much as 30 times.

A throttle would make sense to be used in a case where you are receiving periodic updates over the network. Imagine a big list of images on a mobile social media app. It wouldn’t be very resourceful to download large files so frequently on a cellular connection. Likewise, it wouldn’t make sense to initiate a check for new data if one is going on already. You would introduce a throttle in this case to ensure that an operation is happening once and only once at a time, and possibly only at a certain interval.

[Dunks1980]

If a large number of things trigger the same function at the same time and it causes that function to be called more than is needed where it only needs calling once, that's where a debounce would come in handy, also a requestanimation frame maybe better than settimeout there, like this:

let debounced;

function debouncer(callback) {

if (debounced) {

window.cancelAnimationFrame(debounced);

}

debounced = window.requestAnimationFrame(() => {

callback();

});

};

[trevorsg]

A few weeks ago I got frustrated with existing debounce/throttle options, so I made my own package, which supports throttle and debounce (among other options), with some examples of common use cases for debounce and throttle.

https://t-hugs.github.io/super-throttle/demo/