DEV Community

Cover image for Comprehensive Guide to Debouncing in JavaScript: Improve Your Code Efficiency

Comprehensive Guide to Debouncing in JavaScript: Improve Your Code Efficiency

Dipak Ahirav on June 09, 2024

Learn how to implement debouncing in JavaScript with practical examples and tips. Master the debounce function and improve your web performance. p...
Collapse
 
seanfrisbey profile image
Sean Frisbey

Having come from a hardware background, the way "denouncing" is used in software bother's me 🥲

Collapse
 
aliasfoxkde profile image
Micheal Kinney

Exactly the reason I read this article. I had to know what debouncing meant in software terms.. I thought it was long dead with CRT monitors. And maybe it's just my own ignorance, but I feel caching accomplishes the same with added benefits.

Collapse
 
armando284 profile image
Armando

Caching and debouncing are two different concepts that target different problems, with caching you could, for example, not calling the API since you already have the data saved on your client’s RAM; debouncing on the other hand would stop the call to the function that calls your API or cached data until sometime has passed. For example on a Google place input with autocomplete for places if you don’t use debouncing and the user wants to search for “new y” you’ll have several calls to your autocomplete API as the user writes since it’s attached to the input event: “n”, “ne”, “new”, “new “, and “new y” so you’ll get 5 calls to your API when the user only needs the last one, debouncing will make only the last event calls your API or if you want, your cached data.

Collapse
 
vivek1052 profile image
Vivek Parashar

Exactly. Undergrad myself still thinks debouncing as eliminating short button click due to contact noise

Collapse
 
nur_ammarnaufal_ef46fe3e profile image
Nur Ammar Naufal

lets code arduino wkwkwk

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

Not reusable, but just in case you want to have debounce feature on your search box that appears just once forever:

let debounce;
node.addEventListener('keydown', function () {
    debounce && clearTimeout(debounce);
    debounce = setTimeout(() => {
        console.info('Yo!');
        console.info(this.value);
    }, 300);
}, false);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jeffrey_tackett_5ef1a0bdf profile image
Jeffrey Tackett

The biggest issue I have with debounce is the delay (aka, input lag), where users do notice that it isn't like a switch in the real world. There is even an interview with John Carmack, in which he complained that all UI components for computers are wrong because they wait for a full click instead of changing state on mouse button down. So, debounce adds an additional delay and that is my complaint with this simple implementation, I have made a version that would trigger the first event immediately and would consume any additional events until it would timeout. This is the inversion of the design given in this article, the cool thing about my design is that it can be used for notifications that self dismiss and then, using a queue, would display the next one.

Collapse
 
flyaku profile image
Flyaku

Full click allows users to maintain click and get out of a button without triggering it, it's handy.

Collapse
 
marcelomsc profile image
Marcelo

On the input from user, you can use an image of a search element to when user click do the search. Sometimes, we complicated things that don't need to be complicate...
I think that UI Designer are always making things that don't improve user experience, but looks good on the screen. kkkkkk

Collapse
 
jangelodev profile image
João Angelo

Top, very nice !
Thanks for sharing

Collapse
 
tojacob profile image
Jacob Samuel G.

Simple but powerful

Collapse
 
dipakahirav profile image
Dipak Ahirav • Edited

Thank you @tojacob ..please subscribe to my YouTube channel to support my channel and get more web development tutorials.

Collapse
 
alidarrudi profile image
ali

Simple, concise, useful

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank you so much @alidarrudi for your kind words and feedback! 🙏 I'm thrilled to hear that you found the post helpful. Your support means a lot to me. If you enjoyed this post, please consider subscribing to my YouTube channel devDive with Dipak for more content. Don’t forget to share it with your friends and help spread the word. Your support helps me to continue creating valuable content. Thanks again! 😊

Collapse
 
buarki profile image
buarki

very straightforward and handy, bro! keep it up

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank you so much @buarki for your kind words and feedback! 🙏 I'm thrilled to hear that you found the post helpful. Your support means a lot to me. If you enjoyed this post, please consider subscribing to my YouTube channel devDive with Dipak for more content. Don’t forget to share it with your friends and help spread the word. Your support helps me to continue creating valuable content. Thanks again! 😊

Collapse
 
pratiksha_ganage_9fb67d6d profile image
pratiksha ganage

Thank you so much. This helped me to clear my concept about debouncing.

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank you so much @pratiksha_ganage_9fb67d6d for your kind words and feedback! 🙏 I'm thrilled to hear that you found the post helpful. Your support means a lot to me. If you enjoyed this post, please consider subscribing to my YouTube channel devDive with Dipak for more content. Don’t forget to share it with your friends and help spread the word. Your support helps me to continue creating valuable content. Thanks again! 😊

Collapse
 
cascod profile image
56LeoMessi

Thanks for this article.
Simple yet effective.
Would definitely try sometime.

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank you @cascod .please subscribe to my YouTube channel to support my channel and get more web development tutorials.