Async AjaxCall in a for loop Javascript

Question

How can I make each iteration a new Ajaxcall that needs to be async. without using

async: false,

If I do this with the async I get a warning message, and my UI Freezes, how can I fix this? This is not a normal for loop

EDIT1

var username = "username1";
var password = "test";
var code = "";
for(var i = 0; i < results.lenght;i++){

   $.ajax({
        data: {username:username, password: password},
        url: './php/'+results[i].NAME+'.php',
        method: 'POST',
        datatype: 'json',
        success: function(msg) {
           //all the msg info needs to be filled in in the html. via the var "code"
        }
        });    
    }
return code;

You can restructure your code so you use recursion instead of a loop. Next function call (i.e. iteration) is dependent on success callback of Ajax. — noahnu, Jan 26 '16 at 20:47
How could can I do this? Can you mabe give a litle example with to change EDIT1 to a recursion function? — vanlooverenkoen, Jan 26 '16 at 20:52
@Juhana This isn't a typical JavaScript loop closure question. — krillgar, Jan 26 '16 at 20:56
It is unclear what problem you are having. You can insert html into the page in the success callback as is, is the order of the html the problem? — Kevin B, Jan 26 '16 at 21:05

score 2 · Answer 1 · answered Jan 26 '16 at 21:00

2

Use the promise semantics of jQuery Ajax requests.

var params = {
    username: "username1",
    password: "test"
};

// build an array of Ajax requests
var requests = results.map(function (result) {
    var url = './php/' + encodeURIComponent(result.NAME) + '.php';
    return $.post(url, params, null, 'json');
});

// wait until all requests are done with $.when()
$.when.apply($, requests).done(function (responses) {
    responses.forEach(function (data) {
        // fill the data into the html
    });
});

See http://api.jquery.com/jquery.when/ and related pages, especially http://api.jquery.com/category/deferred-object/.

answered Jan 26 '16 at 21:00

Tomalak

332,285
67
532
628

this will work to I think but for now I'm going with the other solution maby later, when the complete program is done I come back to check the fastest way thanks – vanlooverenkoen Jan 26 '16 at 21:13
The fastest way? What are you talking about? – Tomalak Jan 26 '16 at 21:21

score 1 · Accepted Answer · answered Jan 26 '16 at 20:55

You can do something along these lines (haven't tested the code):

function doIteration(done, i){
    if(i <= 0){ done(); return; }

    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status == 200){
                // Process response...
                console.log(xmlHttp.responseText);

                // Do next iteration.
                doIteration(done, --i);
            } else {
                doIteration(done, 0);
            }
        }
    };
    xmlHttp.open("method", "script.php");
    xmlHttp.send(null);
}

doIteration(function(){
    alert("Done loop!");
}, 10);

EDIT: Didn't realize you were using jQuery, just replace the xmlHttp requests with $.ajax and leave async enabled.

Async AjaxCall in a for loop Javascript

2 Answers2