using $.post() within a loop

Question

I may be doing something very silly here. Basically a user can have multiple "sites" and for each site we have to run some calculations to come up with a total. We have a php page which does these calculations which we can call calculate.php. It returns a string ex: 50 which we then parse into a float in JS. So here's what I'm trying to do: get the total of all of the numbers outputted by calculate.php.

My idea was to loop through the sites, $.post() to calculate.php within every iteration (other things are being done too in the loop, less important) and add to a variable in the callback function. I believe my problem is that $.post() is async... Here is my sample code:

function systems(siteList){

    var runningTotal = 0;

    for (var ii=0,i<siteList.length,i++){

         $.post("calculate.php",{foo:siteList[ii]},function(data){

        // important part
        runningTotal = runningTotal + data

        })

    }

    //outside loop
    alert(runningTotal)

}

This function may be imperfect, but my real question is how can I achieve the result I'm looking for here? Just so you know, runningTotal always alerts as 0 with the above code.

Thanks

EDIT: Thanks to all for your help. from what I can see, it is not wise of me to be using so many AJAX calls so instead of directly fixing this problem, I believe I will take a step back and take the advice of sending only one ajax callback to perform the task of summing for me. Thanks again

*"I believe my problem is that $.post() isnt async"* No, the problem is that it *is* async. — Felix Kling, Jul 31 '13 at 19:08
@collapsar: The second argument is the data you want to pass with the request. — Felix Kling, Jul 31 '13 at 19:13
@FelixKling: careful reading wins the day. sorry, i skipped the essential part in the docs, and thx for the hint — collapsar, Jul 31 '13 at 19:15
I'm not sure if this question should be closed as duplicate, but here is a very similar question (to which I provided the same answer btw): http://stackoverflow.com/questions/8726046/multiple-ajax-calls-inside-a-each-function-then-do-something-once-all-of-the. — Felix Kling, Jul 31 '13 at 19:22

Felix Kling · Accepted Answer · 2013-07-31T19:30:34.077

I'd suggest to make use of $.when and run a callback once all Ajax calls are done. At that moment you have access to the response of each Ajax call and you can perform any necessary computation.

For example:

function systems(siteList){

    var promises = [];

    for (var ii=0; i<siteList.length; i++){
        // `$.post` returns a promise. We keep track of each promise.
        promises.push($.post("calculate.php",{foo:siteList[ii]}));
    }

    $.when.apply($, promises).then(function() {
        // this is called once the responses of all Ajax calls 
        // have been received
        var sum = 0;
        for (var i = 0, l = arguments.length; i < l; i++) {
            sum += +arguments[i][0]; // value must be cast to number first
        }
        alert(sum)
    });
}

Have a look at the jQuery documentation to learn more about promises: http://learn.jquery.com/code-organization/deferreds/.

In general though, it's better to make as few Ajax requests as possible. If you can change the server side code, I would change it to accept a list of values, not only one value, and let the server return the final result.

people seem to agree with this answer, I will give it a shot, thanks a lot — Sam Creamer, Jul 31 '13 at 19:17

score 2 · Answer 2 · answered Jul 31 '13 at 19:12

2

I recommend you package up your data on the client side (in JavaScript) and send it to the server in one AJAX request. Multiple requests waste bandwidth and time.

Or, if the calculations are simple and don't need a database or some other external dependency, just move your calculations to a library of javascript functions and do it all client side.

answered Jul 31 '13 at 19:12

kevin628

3,458
3
30
44

I've also wondered about this... These aren't the only ajax requests we do either, we have a couple others on the same page. – Sam Creamer Jul 31 '13 at 19:18
but they do have external dependency unfortunately... sql query – Sam Creamer Aug 01 '13 at 14:40

score 2 · Answer 3 · answered Jul 31 '13 at 19:13

Leaving aside that there should probably be one request doing this sort of summing up the calculations on the server side (IMHO), use a counter and when it reaches 0 you know, you have all results collected:

function systems(siteList){

    var runningTotal = 0;
    var counter = 0;

    for (var ii=0,i<siteList.length,i++){
        counter++;
        $.post("calculate.php",{foo:siteList[ii]},function(data){

            // important part
            runningTotal = runningTotal + data
            counter--;
            if(counter==0)
                alert(runningTotal)
           });

    }

}

score 0 · Answer 4 · answered Jul 31 '13 at 19:15

Not very fancy, but you could use a file on the server to store your running total.

As each ajax request is received, read/update total/write to a file on the server.

Then send that value back either after receiving a specific request (&request=send_total), or somehow appended to the output for each request ( 50|3753 ).

score -3 · Answer 5 · answered Jul 31 '13 at 19:07

-3

AJAX is asynchronous.

Do the alert inside of the AJAX callback.

answered Jul 31 '13 at 19:07

Naftali

144,921
39
244
303

using $.post() within a loop

5 Answers5