Is there any way to detect if there are any asynchronous calls being run?

Question

I need to run a loop of asynchronous calls, but they cannot run simultaneously, I have to wait for the end to run another. Only I have no control over this call(It is a js function of Sharepoint CSOM).

So I first my idea is just to detect if a call is already running. If it is running I will test again until there is no more call running, and then yes I continue the loop.

Kind of the idea:

function chamarAjax(){
    blablabla();

    if(blablabla()){
        continuarLoop = false;
    }
}

if(!ajaxIsRunning){
  if(continuarLoop){
      chamarAjax();
  }
}

Answer 1

Count how many times you execute an AJAX request, and then count the number of times you’ve seen a call to the completed callback. Once the completed callback is equal to the number of times you’ve emitted ajax calls, you’ll know what’s running.

var total = arr.length;
var count = 0;
for(var i = 0; i < arr.length; i++){
     $.ajax({
        // outras opções 
        complete: function(){
            count++;
            if(count == total){ 
                // tudo consumado!
            }
        }
     });
}

Note that I use the "full" callback, not "success", since if one of the requests fails, it is 'complete'. In addition, I declared the expected value in 'total' first. This is to avoid the unlikely (although technically possible) scenario of having all pending ajax orders ending before you post all of them, and therefore have a count.

Answer 2

You can simply chain your calls, only to call the next one when you’ve finished the previous one, I don’t know if this meets your needs, but it’s a way:

$(function(){
    $.ajax({ // request 1
        type: "POST",
        url: "some.php",
        data: { name: "John", location: "Boston" }
    }).always(function() {
        console.log("Complete 1");
        $.ajax({ // request 2
            type: "POST",
            url: "some2.php",
            data: { name: "John", location: "Boston" }
        }).always(function() {
            console.log("Complete 2");
            $.ajax({ // request 3
                type: "POST",
                url: "some3.php",
                data: { name: "John", location: "Boston" }
            }).always(function() {
                console.log("Complete 3");
            });
        });
    });
});

Answer 3

If you are using jQuery, you can get the number of active Ajax requests through the function $.active, this is a function that jQuery uses internally but not mentioned in the official documentation. It is OK to use it.

See this example found on Github.

function checkPendingRequest() 
{
    if ($.active > 0) {
      // existe requisições pendentes
    }
    else {

      // não há requisições pendentes
    }
};

References: Font¹, Source²

Answer 4

You can set the property async of AJAX as false, is a property that already exists in itself AJAX of JQuery

---

By default, the method jQuery.Ajax comes with the parameter async set as true. That means the requisitions assíncronas are enabled. Sometimes it is necessary that we enlace the requests Ajax, that is, carry out a requisition Ajax only when the previous one ends, and then yes, perform the next.

More or less like this:

Detail for a question raised last week by the user @Wallacemaxters

That is, the requisitions síncronas are being discouraged, but can still use this way, and for a long time will still be possible

That way your Ajax could look more or less like this:

jQuery.ajax({ /*Requisição 1*/
  url: 'index.html',
  async: false,
  success: function(data) {
    jQuery('.destino').html(data);

    jQuery.ajax({ /*Requisição 2*/
      url: 'index2.html',
      async: false,
      success: function() {
         alert(jQuery("#campo").val());
     }

 }
});