Question

Often times I find myself designing apps that make AJAX calls to the server, outside APIs, HTTP requests, etc. The problem is, while this async calls are happening, the user still has the ability to click on items that make the same AJAX call or interrupt the flow of the app, etc. I’ve experimented with various hacks to prevent this, but I’m wondering what the most accepted way of doing this is?

To make this more concrete, let’s say I have a button element that makes an AJAX call and a form element that alters some of the data my app uses for the AJAX call. What is the best way to design the button and form functions so that they do not work while button's AJAX call is in process?

Answer 1

The best way to accomplish what you want is to lead the AJAX calls trough a function so you can check within that function if a request is active. Here’s an example assuming you’re using JQuery:

active_ajax_call = false;

function get_ajax(url, senddata) {
    if(active_ajax_call == false) {
        active_ajax_call = true;
        $.ajax({
            type: "POST",
            url: url,
            data: senddata
        }).done(function (data) {
            active_ajax_call = false;
            console.log(data);
        });
    }
}

get_ajax("some_url", {name: "John", location: "Amsterdam"});

And ofcourse present the website user a nice ajax loader or something so they know data is being pulled.