TheFrack
TheFrack

Reputation: 2873

jQuery AJAX Result Block Doesn't Fire Immediately

I have a jQuery POST function inside of a loop (multiple post calls).
For some reason, jQuery is posting, but not returning all the data until the loop ends and parsing all the results at once.

FOREACH arg_value IN args
{
console.log('Do stuff');

    $.post('https://blah.com/xml.php',
           {arg: arg_value},
           function(xml) {
                $(xml).find('tag').each(function() {
                        console.log('Do more stuff');
                });
           });
}

The output of this is...

Do stuff
Do stuff
Do stuff
Do more stuff
Do more stuff
Do more stuff

It seems like jQuery is caching the result or not executing it until the end.

I'm expecting...

Do stuff
Do more stuff
Do stuff
Do more stuff
Do stuff
Do more stuff

Is there an option to tell jQuery to pause execution until there is a result from the AJAX? It appears to be running asynchronously as usual, but I don't want that in this case.

Upvotes: 3

Views: 210

Answers (4)

thecodejack
thecodejack

Reputation: 13379

$.post() is async call...will not work in loops the way u want..To get the way u want..here is the solution..

var i=0;
callbackfunc(i) {
console.log('Do stuff');
$.post('https://blah.com/xml.php',
        {arg: args[i]},
        function(xml) {
            $(xml).find('tag').each(function() {
              //something related to xml data  
            });
             console.log('Do more stuff');
              i++;
              if(i<args.length)callbackfunc(i)
           }
        });
}

take care of variables..may create closures here...

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72857

A AJAX call is asynchronous. This means your callback:

function(xml) {
    $(xml).find('tag').each(function() {
        console.log('Do more stuff');
    });
}

Only gets executed when the server returns a response.

Meanwhile, your for-each loop will keep running, and logging Do stuff.
Unless you're doing crazy stuff in your loop, the loop will be faster than the server response
Like Jan Dvorak mentioned, Even if you do crazy stuff, the AJAX callbacks will wait for the loop to finish, resulting in Do stuff always appearing before any of the AJAX responses.

Upvotes: 3

MrCode
MrCode

Reputation: 64526

Your ajax call is asyncronous, which means that the ajax call is fired off, then the execution flow of further code continues. It does not wait around for the response. When the response is finally received, the callback is executed.

What you could do is to have your ajax calls all stack up in a queue and as each response is received, fire off the next call in the queue. This would achieve your diesired effect, whereby the next ajax call is not sent until the current one is done.

If you have many calls, this would be much slower than firing them all off as soon as they are needed because browsers can easily handle multiple ajax calls at the same time.

Upvotes: 1

hereandnow78
hereandnow78

Reputation: 14434

you are asynchronous here, if you want to do that probably the easiest way to achieve this is to use async.js

Upvotes: 0

Related Questions