Debounce API Requests in a JS Class

I have a react application that needs to access an API endpoint on the client side - which is hit when a user clicks on a button, as well as a few other places in the UI. The trouble is, the API endpoint is a cloud function, which is charged on a per-execution basis.

I don't want users to be able to spam-click this button and have to pay for it, but I also don't want to disable the button during the request - which would encourage the user to view the source and spam my API themselves. I want something to work invisibly, so they think that everything is working as they expect - a new request every time they click.

Because of how I crafted the API response, only the last request really matters within a specified amount of time, which means a debounced API request function would be perfect.

Here's an overview of how I implemented it, based off of the lodash debounce method:

No comments:

Post a Comment

Featured

Debounce API Requests in a JS Class

I have a react application that needs to access an API endpoint on the client side - which is hit when a user clicks on a button, as well as...

Popular