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
– Oriol, Commented Oct 4, 2013 at 17:36
Check this answer out: stackoverflow.com/questions/16581951/… — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Oct 4, 2013 at 17:44

James Montagne · Accepted Answer · 2013-10-04 17:43:22Z

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 4, 2013 at 17:43

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2597504 Over a year ago

Doesn't work. If I use jQueryFunction(i,function(json){ jsonArray.push(json); });

James Montagne Over a year ago

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 Over a year ago

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

user2597504 Over a year ago

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

James Montagne Over a year ago

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 stackoverflow.com/questions/14220321/…

|

Collectives™ on Stack Overflow

Javascript return value from multiple callback

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related