for循环Javascript中的异步AjaxCall

时间:2016-01-26 20:46:02

标签: javascript jquery ajax for-loop

如何使每次迭代成为需要异步的新Ajaxcall。 不使用

async: false,

如果我使用异步执行此操作,我会收到一条警告消息,并且我的用户界面已冻结,我该如何解决此问题?这不是正常的循环

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;

2 个答案:

答案 0 :(得分:2)

使用jQuery Ajax请求的promise语义。

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
    });
});

请参阅http://api.jquery.com/jquery.when/及相关网页,尤其是http://api.jquery.com/category/deferred-object/

答案 1 :(得分:1)

你可以沿着这些方向做一些事情(没有测试过代码):

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);
编辑:没有意识到你正在使用jQuery,只需用$ .ajax替换xmlHttp请求并启用async