Javascript return value from multiple callback

Question

I want to wait all callback functions finish and then return a final result, like this:

                    var jsonArray = new Array();

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

                    return jsonArray;

jQueryFunction is a function which contains the asynchronous ajax and callback, return a value which is called json. I want to wait for the for loop finish and then put all the return values into jsonArray, return it finally.

My goal is that waiting for all jQueryFunction callbacks finish and store their return into jsonArray, and then return jsonArray at the end. My previous goal doesn't work because it returns the jsonArray right away and doesn't wait for the for loop

I tried like this:

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

                function finalResultFunction()
                {
                    var jsonArray = new Array();

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

                    $.when.apply($, jsonArray).done(function(){
                      alert(jsonArray[0]);
                    ...
                 }

                 setInterval(finalResultFunction,1000);

The first alert shows me the correct object, but the second one still shows me null. Why? How to fix it?

*I want to wait for the for loop finish*. Are you using synchronous AJAX, then? — Oriol, Oct 04 '13 at 17:36
Check this answer out: http://stackoverflow.com/questions/16581951/waiting-for-event-to-be-handled-to-continue-executing-the-function-that-has-trig/18799935#18831177 — Sergiu Paraschiv, Oct 04 '13 at 17:44

score 2 · Answer 1 · answered Oct 04 '13 at 17:43

2

You can use jquery's when to wait on multiple requests. You just need the jQueryFunction to return the jqXHR.

function jQueryFunction(){
    return $.ajax( /* ... */ );
}

var requests = [];

for(var i = 0; i < 10; i++)
{
    var xhr = jQueryFunction( /* ... */ );

    requests.push(xhr);
}

$.when.apply($, requests).done(function(){

    // EVERYTHING IS NOW DONE, DO SOMETHING HERE

});

answered Oct 04 '13 at 17:43

James Montagne

77,516
14
110
130

Doesn't work. If I use jQueryFunction(i,function(json){ jsonArray.push(json); }); – user2597504 Oct 04 '13 at 18:01
You'll have to be more specific than just "doesn't work". What does it to and are there errors on the console. The concept works. – James Montagne Oct 04 '13 at 18:14
Your posted code is nothing like the code I have in my answer. You didn't make your `jQueryFunction` return the xhr (the result of the ajax function) and you are calling `when` on an empty array instead of an array of these `xhr` objects – James Montagne Oct 04 '13 at 18:45
I use callback to return the value. And because ajax is the asynchronous function, I don't know how to return a value like you provide above – user2597504 Oct 04 '13 at 18:56
That's the whole problem. You can't use your callback to return a value. That will never work. This might be a good read. It's kind of long but the content is really helpful in understanding all of the issues around ajax http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – James Montagne Oct 04 '13 at 19:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38644/discussion-between-user2597504-and-james-montagne) – user2597504 Oct 04 '13 at 20:23

Javascript return value from multiple callback

1 Answers1