Parallel Asynchronous Ajax Requests Using Jquery

Parallel asynchronous Ajax requests using jQuery

Try this solution, which can support any specific number of parallel queries:

var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
  var number = this;
  $.getJSON("/values/" + number, function(data) {
    sum += data.value;
    done -= 1;
    if(done == 0) $("#mynode").html(sum);
  });
});

Parallel AJAX requests in jQuery

$.ajax() is an asynchronous function which initiates a request and then returns immediately. So if you call it multiple times in a row, it will create concurrent requests.

Your code still runs on a single thread, but the HTTP requests happen in parallel in the background and jQuery invokes your callbacks as they return data. So you get parallelism without having to deal with threads directly.

In your GlobalCheck():

var CONCURRENT_REQUESTS = 4;

while (done < CONCURRENT_REQUESTS) {
  SingleCheck(done++);
}

will start four parallel requests, and your existing code will trigger a new request each time one finishes, so you will always have 4 parallel requests running. And because your code only runs on a single thread, you don't have to worry about concurrency issues with your done variable etc.

For more concurrent requests, just increase the value of CONCURRENT_REQUESTS, but note that very quickly you'll hit the browser's limit of concurrent requests to a single domain - it varies per browser but it's always a pretty small number. See this answer for specifics.

Parallel AJAX request without jQuery

Use a method to make the request that will return a promise.

This could be simply using the fetch api or wrapping XMLHttpRequest with a promise.

Put the two promises in an array and pass it to Promise.all.

Promise.all([ fetch("http://example.com"), fetch("http://example.net") ])
    .then(array => console.log(array));

Parallel Ajax Calls in Javascript/jQuery

Using jQuery.when (deferreds):

$.when( $.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3") ).then(function(resp1, resp2, resp3){ 
    // plot graph using data from resp1, resp2 & resp3 
});

callback function only called when all 3 ajax calls are completed.

parallel asynchronous jQuery-AJAX-Requests blocking each other

The whole premise of completing or not is purely based on a race condition between execution of the async requests because the alert() in the callback of the first async request. If the second request was faster than the first (fast enough to make up for the fact that it was initiated after the first) then you wouldn't see what you are concerned about

about #1 no, this wouldn't be the same because when you have the ajax call before alert and when you use async : false the ajax request will finish completely before moving on (to the alert). In other words, you are completely synchronous at that point because you are in the callback of the only asynchronous event. Don't use async: false by the way.

as was said, alert() is blocking the execution.

FYI, you can make fiddles with this and play with timing -- Note the use of the delay in the data object of the request. Note in this example how both finish because of the timing I set up, but if you reverse it then it won't finish until alert() is cleared.

In the end DO NOT USE alert()!!

fiddle

Multiple ajax request parallel issue

Insted of loop check for sync and async

Put your AJAX call in a function and call it from the AJAX callback:
check Link

---

Related Topics