CODEWITHSUNDEEP
javascriptphpjqueryajax
user1590642
user1590642

Reputation: 199

Multiple ajax calls fired simultaneously not working properly

I created a site which load every few seconds data from multiple sources via AJAX. However I experience some strange behavior. Here is the code:

function worker1() {
    var currentUrl = 'aaa.php?var=1';
    $.ajax({
        cache: false,
        url: currentUrl, 
        success: function(data) {                    
            alert(data)
        },
        complete: function() {
            setTimeout(worker1, 2000);
        }
    });
}

function worker2() {
    var currentUrl = 'aaa.php?var=2';
    $.ajax({
        cache: false,
        url: currentUrl, 
        success: function(data) {                    
            alert(data)
        },
        complete: function() {
            setTimeout(worker2, 2000);
        }
    });
}

The problem is that many times, one of the workers returns NaN. If I change the frequency of calls for, lets say, 2000 and 1900, then everything is working ok and I got almost no NaN results. When those frequencies are same, I get over 80% NaN results for one of the calls. It seems like the browser cannot handle two requests called at exact same time. I use only those two workers, so the browser shouldn't be overloaded by AJAX requests. Where is the problem?

Note that the aaa.php works with the mySql database and do some simple queries base on parameters in url.

Upvotes: 3

Views: 2951

Answers (2)

Goblinlord
Goblinlord

Reputation: 3390

Maybe, don't use these workers and use promises instead like below? Can't say anything about the errors being returned though without looking at the server code. Below is working code for what it looks like you are trying to do.

This is a simple example but you could use different resolvers for each url with an object ({url:resolverFunc}) and then iterate using Object.keys. 

var urls = [
  'http://jsonplaceholder.typicode.com/users/1',
  'http://jsonplaceholder.typicode.com/users/2',
  'http://jsonplaceholder.typicode.com/users/3',
  'http://jsonplaceholder.typicode.com/users/4',
  'http://jsonplaceholder.typicode.com/users/5',
  'http://jsonplaceholder.typicode.com/users/6',
  'http://jsonplaceholder.typicode.com/users/7'
]

function multiGet(arr) {
  var promises = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    promises.push($.get(arr[i])
      .then(function(res) {
        // Do something with each response
        console.log(res);
      })
    );
  }
  return $.when(promises);
}

multiGet(urls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Vikrant Kashyap
Vikrant Kashyap

Reputation: 6846

All you need is $.each and the two parameter form of $.ajax

var urls = ['/url/one','/url/two', ....];

$.each(urls, function(i,u){ 
     $.ajax(u, 
       { type: 'POST',
         data: {
            answer_service: answer,
            expertise_service: expertise,
            email_service: email,
         },
         success: function (data) {
             $(".anydivclass").text(data);
         } 
       }
     );
});

Note: The messages generated by the success callback will overwrite each other as shown. You'll probably want to use $('#divid').append() or similar in the success function.

Upvotes: 1

Related Questions