DEV Community

JavaScript Debounce, Easiest explanation !(with Code)

jeetvora331 on July 10, 2023

Debouncing is a programming technique that helps to improve the performance of web applications by limiting the frequency of function calls. In thi...

Read full post

Fernando González Tostado • Jul 11 '23

I liked the other use cases. I usually only think in search inputs, but submit buttons should probably also be debounced.

jeetvora331 • Jul 11 '23

Thanks !

MJ • Jul 17 '23

does (...args) passed into the return function in debounce() represent the args in debounce(searchData, 3000) when called in debouncedSearchData?

jeetvora331 • Jul 17 '23

that represent the arguments passed in the main function (in this case it is searchData()). To keep the things simple, I have not used any arguments in the function searchData().

Ricardo • Jul 11 '23

Love the explanation. Great article.

jeetvora331 • Jul 11 '23

Thanks @ricardo

Gallih Armada • Jul 15 '23

Thanks very insightfull bro

jeetvora331 • Jul 15 '23

Thanks for your feedback!

FredAbod • Jul 13 '23

Thanks this is very usefull

jeetvora331 • Jul 15 '23

Thanks for your feedback!

Anuradha Aggarwal • Jul 26 '23

Nice article!!

Ibrahim Bagalwa • Aug 12 '23

Nice one

Thar Htoo • Jul 16 '23

Thanks!

jeetvora331 • Jul 16 '23

Welcome!

Jatin Sharma • Jul 29 '23

I use the following approach, it's also the same:


/**
 * Debounces a function by delaying its execution until a certain amount of time has passed
 * since the last time it was invoked. Only the last invocation within the delay period will be executed.
 *
 * @param {Function} func - The function to be debounced.
 * @param {number} delay - The delay in milliseconds before the function is executed.
 * @returns {Function} - A debounced function.
 */
export function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

jeetvora331 • Jul 29 '23

Nice one !

Paulo Rosa • Jun 2 '24

Really easy and simple explanation!

Aryan Jain • Jul 30 '23

This doesn't work for me for some reason.
Basicallt it repeatedly calls the "myFunc" function whenever I enter a key but with a delay of 3000 milliseconds.

Any idea? TIA!

Raffi Zulvian Muzhaffar • Aug 28 '23 • Edited

Hi, I've had a similar problem before. You could use a useRef when you initialize debounced to prevent the function run on every keystroke.

const debounced = useRef(debounce(myFunc, 3000)).current;

This problem happens because every time you type, the component rerenders and creates a new instance of debounced. That's why it seems clearTimeout(timer) was not working as expected.

Hope this helps!

jeetvora331 • Aug 29 '23

Thanks Raffi, I learned something new today !

Ryan Zayne • Nov 12 '23 • Edited

You could also achieve the one time initialisation like this:

const [debounced]= useState(()=>debounce(myFunc, 3000))

jeetvora331 • Jul 30 '23 • Edited

checkout this, it might help you

geeksforgeeks.org/implement-search...

William R. J. Ribeiro • Aug 29 '24

Nice explanation. Here's my favorive demo comparing debouncing and throttling: web.archive.org/web/20180324022838...

Atul Jalan • Jan 21

Nice. There's also this good blog post that gives some more advanced techniques around debouncing.

Mitchell Mutandah • Jul 17 '24

Nice breakdown. I can't wait to apply this! 😎

Rama Subramanyam • Dec 15 '24

Thanks for the nice article and good picture.

Leandro Nuñez • Jul 17 '23

Thanks!

fruntend • Jul 17 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Kevin Wasonga • Oct 16 '24

nice explanation with examples

Aditya • Dec 26 '24

wonderfully explained 👏

yujeongKim • Jul 29 '24

Thanks!

Sandhya Ghadage • May 29

Thanks this is very useful 👍

AhmadALi-glitch • Feb 23 '24 • Edited

Thanks !