How to Manage Multiple AJAX Calls Efficiently: Parallel vs Serial Strategies

Usually, to reduce page load time, the core content is displayed first and other data is fetched via AJAX after the page finishes loading.

This can generate multiple AJAX requests; for better user experience, parallel requests are preferred, which introduces concurrency challenges.

1. Convert Parallel to Serial

If business logic and user experience allow, converting to serial execution is the simplest solution.

function async1(){
    //do sth...
    async2();
}
function async2(){
    //do sth...
}
async1();

2. Callback Counting

Use a counter in a shared callback to determine when all asynchronous operations have completed.

function async1(){
    //do sth...
    callback();
}
function async2(){
    //do sth...
    callback();
}
function callback(){
    cnt++;
    if (2 == cnt) console.log('All completed');
}

3. Non‑Blocking Loop

Employ a timed interval to poll a counter; this method consumes more CPU, so use it judiciously.

function async1(){
    //do sth...
    cnt++;
}
function async2(){
    //do sth...
    cnt++;
}
var interval = setInterval(function(){
    if (2 === cnt){
        console.log('Execution finished');
        clearInterval(interval);
    }
}, 100);

4. jQuery Deferred

Leverage jQuery’s Deferred objects: resolve each request when finished and use $.when to run code after all are resolved.

var d1 = $.Deferred();
var d2 = $.Deferred();

function async1(){
    d1.resolve("Fish");
}
function async2(){
    d2.resolve("Pizza");
}
$.when(d1, d2).done(function(v1, v2){
    console.log(v1 + v2 + " completed");
});