Prevent second ajax call from waiting till completion of first ajax call

Question

I'm running two ajax calls on page load. They both work as expected if I open the page in desktop browser.

However, if I open the same page in an android browser (Chrome for example), I noticed that the second ajax function's response is waiting for completion of the first ajax function which kinda defeats the purpose of asynchronous-ness. Both are executing concurrently, but the second function's success is only executing after completion of first ajax call's success function.

Screenshot

The fact that it is working in desktop browsers and not in android browsers leads me to believe that there must be some kind of setting in android which is blocking concurrent asynchronous calls.

If that is the case, is it possible that I can disable that? My code is as follows btw:

$(function(){           
       var intervalID = window.setInterval(function(){
                doAjax(); // this is the function which is waiting for completion of first ajax call
            }, 2000);

      // the first ajax call
      $.ajax({
    type:'post',
    url:'progress-insert.php', // basically is meant for insertion of records into db
    success:function(data)
    {
       clearInterval(intervalID);
    }   
     });
     
     function doAjax()
     {          
    $.ajax({
        type:'post',
        url:'progress-update.php', // basically returns how many records have been inserted so far
        success:function(data)
        {
                // do something
        }
    }); 
      }
     
});

Answer 1

Check out this SO question

There's an answer that points to Browserscope that will give you some info on how many simultaneous connections can be made in modern browsers. One idea to test if you're hitting some kind of limit would be to try to host the two endpoints on separate domains. If it works then you'll know that the browsers has a limit of 1 call per domain, although from the Browserscope list it looks as though that shouldn't be the case.

I also ran your code locally and did not see the same behaviour that you're describing (using Xcode iPhone simulator iOS7 and mobile Safari).

Also, you seem to have two $(function(){ setups, one wrapped in the other. Maybe fix that up and see if it makes a difference...

Answer 2

Unfortunately all browsers implementation of javascript is single-threaded, which means async calls are async for servers but not for same javascript & thus wait for old request. What you can do to overcome that is to push requests in a variable & next time check if request status is not 200 Ok / Success, don't make any further call for same function, sample code can be like:

requests.push($.ajax({
        type:'post',
        url:'progress-update.php', // basically returns how many records have been inserted so far
        success:function(data)
        {
              for(var i = 0; i < requests.length; i++)
              requests[i].abort();
        }
    }));