DEV Community

Throttling and Debouncing. Avoiding unnecessary API calls.

Martín Mato on April 03, 2020

The problem There are sometimes that we need to perform actions on certain events controlled by the user. This can be the case of events...

Read full post

Pontus Lundin • May 6 '20

Great post! I'm to a big fan of throttling/debouncing and I end up writing my own little helpers over and over.

I'll post my debounce function, happy to get feedback 😅 The benefit in this version is that it accepts arguments and get a proper this-binding when used as event handler - if you're into that sort of thing 😉

const debounce = (func, delay = 200) => {
  let timeoutId;

  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  }
};

function search(evt) {
  console.log(evt.target === this); // true
}

const debouncedSearch = debounce(search, 500);
input.addEventListener("input", debouncedSearch);

Thanks again!

Tomer • Apr 4 '20

Great tutorial, I think this is a must for every developer to know it.

Dani Amsalem • Apr 8 '20

I ran into your article at a great time, I was looking at implementing a script based on a screen resize and quickly ran into performance issues.

I will definitely try debouncing or throttling in the near future!

Molly Struve (she/her) • Apr 6 '20

We recently implemented debounce in DEV and it has been great! Awesome write up!

Martín Mato • Apr 6 '20

Thanks. I appreciate.

katy lavallee • Apr 6 '20

I always get these confused. Thanks for the explanation!

Martín Mato • Apr 6 '20

You're welcome!

Priyansh Agrawal • Dec 31 '23 • Edited

I have a question: I am triggering the POST Request on the button click event. The API makes entries in the database. Generally, this API takes 1 sec on average. My problem is that my users can press the button multiple times before completing the API request, which creates numerous resources. I tried putting the pre-check before making any database changes and returning the exception, which is displayed on the UI with an appropriate message. How can I prevent multiple API calls after the first one?