How to prevent multiple AJAX calls from firing on repeated clicks

Let’s consider a common problem when building a website:

The site has a button, or multiple buttons, that triggers an AJAX call when clicked. The API Response takes anywhere from a few milliseconds to several seconds to load, depending on network speed. The user then decides to click on that button a second time and a third and a fourth while waiting for some information to display on the site. How can we prevent all repeated clicks from firing a new API request every time?

First, let’s see an example of what would happen if nothing were done. This is a travel guide website my team and I created as part of our first Bootcamp project, that lists restaurants, weather, and photos for different cities around the world:

Clicking twice on the “Paris” card will display duplicate results for restaurants in that city.

Clicking twice on a weather card would trigger two AJAX calls and hence display duplicate results.

While there are different approaches to fix this issue, like disabling all the buttons that call this particular AJAX request until the request has completed, or canceling the previous request and starting a new one, we opted for a more straightforward solution:

• Maintain a variable isLoading that stores the status of the request. Only if the request is not loading (i.e., there’s no AJAX request in progress), do we start a new request. Otherwise, we just ignore the new click event.

Here’s what the code would look like:

var isLoading = false;
$(document).on("click", ".weather-card", function (event) {
    if (!isLoading) {
        $("#restaurants-container").empty();
        isLoading = true;
        $.ajax({
            "url": "{API_URL}",
            "method": "GET"
        }).then(function (response) {
            // Create elements and append to #restaurants-container
            // ...
            isLoading = false;
        });
    }
});

If isLoading is false, the AJAX call starts, and we immediately change its value to true. Once the AJAX response is received, we turn the value of that variable back to false, so that we can stop ignoring new clicks.

After implementing this fix, the user can click multiple times on the same or a different button while the API call is ongoing, and get unique (non-duplicate) results, because our code prevents multiple AJAX calls from firing on repeated clicks.

Let’s revisit the example of our travel website above, this time after the fix is applied:

Clicking twice on two different cards will now display unique results for the first card that was clicked.

Clicking multiple times on a weather card, or clicking on two different cards while waiting for the AJAX response, would now display unique results for the first card clicked (“Paris” in the example above) because our code is ignoring those “extra clicks” the user made while waiting for the information to load.

Please feel free to share any comments you might have! How are you handling this yourself?

Be sure to check out this project on Github.