DEV Community

Cover image for Throttling and Debouncing. Avoiding unnecessary API calls.

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...
Collapse
 
hontas profile image
Pontus Lundin

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);
Enter fullscreen mode Exit fullscreen mode

Thanks again!

Collapse
 
tomerl101 profile image
Tomer

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

Collapse
 
damsalem profile image
Dani Amsalem

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!

Collapse
 
molly profile image
Molly Struve (she/her)

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

Collapse
 
otamnitram profile image
Martín Mato

Thanks. I appreciate.

Collapse
 
katylava profile image
katy lavallee

I always get these confused. Thanks for the explanation!

Collapse
 
otamnitram profile image
Martín Mato

You're welcome!

Collapse
 
priyansh2 profile image
Priyansh Agrawal • 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?

Collapse
 
krmgns profile image
Kerem Güneş

Thanks for sharing the article.
PS, seems the link is broken at: "throttle-debounce: can be found in npm here".

Collapse
 
otamnitram profile image
Martín Mato

Thanks for noticing. Just fixed it.

Collapse
 
lehmannsystems profile image
Mike

This is a great post! THANKS for sharing!!

Collapse
 
hellovietduc profile image
Duc Nguyen

It's so nice to see the definitions explained by a few lines of code! Great article!

Collapse
 
otamnitram profile image
Martín Mato

Thanks!!

Collapse
 
amaelftah profile image
Ahmed Mohamed Abd El Ftah

this is so cool tutorial . thanks a lot for sharing

Collapse
 
obn0x1ous profile image
Nishant Singh

Awesome article. Covers my use case in examples. I will be adding API throttle and Debounce in one of my project

Collapse
 
spock123 profile image
Lars Rye Jeppesen

RxJS

Collapse
 
ruttmann profile image
Marlon Erich Ruttmann

Really simple but very important concepts. Thanks for the post!

Collapse
 
akshay1502 profile image
Akshay Shinde

Really great explanation.

Collapse
 
johncerpa98 profile image
John

func() won't be executed right away with the throttle one, I don't understand.

Collapse
 
otamnitram profile image
Martín Mato

Good catch!. Func() was misplaced. It needs to run if the timeout is undefined but not as a callback of it.