javascript wait for several callback finished

Question

I have a following javascript program：

                function jQueryFunction(url, callback)
                { 
                    $.ajax
                            ({
                                type: "GET",
                                async: true,
                                url: url,
                                dataType: "jsonp",
                                jsonp: "callback",
                                jsonpCallback: "tpsHandler",
                                success: function(json)
                                {
                                    return callback(json);
                                }
                            });  
                }

                var jsonArray = new Array();
                for(var i = 0; i < 10; i++)
                {
                    jQueryFunction(url[i], function(json){
                       jsonArray[i] = json;
                    });
                }

                //process jsonArray

However, when I check jsonArray after the for loop, it is null. So my question is that how to store the return value from jQueryFunction to jsonArray in for loop and then process it?

I have tried $.when.apply($,jsonArray).done(function) but still the same, it is null.

You're passing a number as the URL, that might explain why it's blank? — Bill Effin Murray, Oct 04 '13 at 22:46
Have you checked the return from something like Chrome's Developer tools? — Bill Effin Murray, Oct 04 '13 at 22:47
Yes, callback(json) is correct. I just want to store them into a array — user2597504, Oct 04 '13 at 22:48
Possible Duplicate? http://stackoverflow.com/questions/19170391/javascript-while-loop-callback — showdev, Oct 04 '13 at 22:50
I only have used jsonp with a callback once and that was a while ago, so it's a big foggy for me. But have you tried sending the data as just json for a test? I don't see a tpsHandler defined as a function anywhere so I'm assuming you just didn't post it. — Bill Effin Murray, Oct 04 '13 at 22:53
The reason I use jsonp is that json format cannot be displayed on highcharts correctly — user2597504, Oct 04 '13 at 22:54
possible duplicate of [Waiting on multiple asynchronous calls to complete before continuing](http://stackoverflow.com/questions/2768293/waiting-on-multiple-asynchronous-calls-to-complete-before-continuing) — RMalke, Apr 26 '14 at 15:32

Dan Heberden · Answer 1 · 2013-10-04T23:03:16.697

A simple way:

function doTheAjax(url, callback) { 
  return $.ajax({
    type: "GET",
    async: true,
    url: url,
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "tpsHandler"
  });
};

var reqs = [];

for(var i = 0; i < 10; i++) {
  reqs.push(doTheAjax(url[i]));
}

// send the array of requests to when, which will fire `done`
// when it's, well, done
$.when.apply($.when, reqs).done(function() {
  $.each(arguments, function(data) {
    // process the data
  });
});

alternatively, make a bunch of requests and put them into jsonArray, but keep track of how many you're making. When they all complete, you have the array. Create your own deferred, resolve it yourself when the counter is up, and return the promise.

var getJSON = function(url) {
  var dfd = $.Deferred();
  var count = 0;
  var total = 10;

  var jsonArray = [];

  for(var i = 0; i < total; i++) {
    doTheAjax(url[i]).done(function(json) {
      jsonArray.push(json);
      count++;
      if ( count >= total ) {
        dfd.resolve(jsonArray);
      }
    });
  }
  return dfd.promise();
};

getJSON().done(function(theCreatedJsonArray) {
  // do stuff
});

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

I'm not sure why the answer to your previous question (using deferreds) didn't work. But the cause of your problem is that you are checking the array before any of the ajax responses arrived. You also have a problem with i referencing the same value on all callbacks.

One simple workaround, if you know how many responses you're expecting:

var arr = [];
for(var i = 0; i < 10; i++){
    jQueryFunction(url[i], function(json){
        arr.push(json);
        if(arr.length == 10) {
            // All 10 responses arrived!
            // DO STUFF FROM HERE
            // e.g., call another function
            console.log(arr);
        } 
    });
}

edited May 23 '17 at 10:25

Community

1
1

answered Oct 04 '13 at 22:59

bfavaretto

71,580
16
111
150

I don't think it will work. If I check the arr after the for loop, it must be null – user2597504 Oct 04 '13 at 23:05
You're not supposed to check it after the loop, see the comments in the code. – bfavaretto Oct 04 '13 at 23:08

javascript wait for several callback finished

2 Answers2