Question

我试图用while或for循环来控制ajax查询。我的目的是让循环执行4次并使用相同的查询填充4个值。我遇到的问题是，当然，AJAX请求是异步的，需要时间。所以我要么最终得到一个冻结的浏览器，要么在它可以分配值之前完成一个循环。

var i = 0;
while (i < 4) {
    doAjaxReq().done(function (result) {
        if (i == 0) val1 = result;
        else if (i == 1) val2 = result;
        else if (i == 2) val3 = result;
        else if (i == 3) val4 = result;
    });
}

如果我将i ++置于ajax请求之外，它当然会在所有请求完成之前完成循环。如果我将i ++放在ajax.done（）中，我将崩溃浏览器。

我该怎么办？

Answer 1

.done()处理程序将在稍后的某个时间被调用。这意味着您的for或while循环将完全完成，i将达到它的终端价值。因此，您要么必须找到不同的结构，要么必须将i放入闭包中，以保留其值。做什么取决于你是否真的想要并行或按顺序运行ajax调用。

如果并行正常（所有ajax同时在飞行中调用），那么您有以下选项：

for (var i = 0; i < 4; i++) {
    // create closure to capture the value of `i`
    (function(index) {
        doAjaxReq().done(function (result) {
            if (index == 0) val1 = result;
            else if (index == 1) val2 = result;
            else if (index == 2) val3 = result;
            else if (index == 3) val4 = result;
        });
     })(i);
}

或者，它可能使编码更容易将结果放入数组并使用promise函数来了解所有内容何时完成：

var promises = [];
for (var i = 0; i < 4;i++) {
    promises.push(doAjaxReq());
}
$.when.apply($, promises).done(function(r1, r2, r3, r4) {
    // all ajax calls are done here and 
    // results are in r1[0], r2[0], r3[0], r4[0]
});

如果你试图一个接一个地对ajax调用进行排序（在启动下一个之前等待一个完成），那么你可以使用这个结构：

 var cntr = 0;
 var results = [];
 function next() {
     doAjaxDone().done(function(data) {
         ++cntr;
         results.push(data);
         if (cntr < 4) {
             next();
         } else {
             // all ajax calls done here and results are in results array
         }
     })
 }

Answer 2

尝试：

   function request(i){
      if(i> 3) return;

    doAjaxReq().done(function (result) {
            if (i == 0) val1 = result;
            else if (i == 1) val2 = result;
            else if (i == 2) val3 = result;
            else if (i == 3) val4 = result;

              request(i+1);
        });
    }

//somewhere
request(0);

Answer 3

我不知道这是否是最好的解决方案，但我想不出更简单的事情

var i = 0;
var results = [];

function xx(){

    if(i >= 4){
        return;
    } else {

        doAjaxReq().done(function (result) {        
            //avoid if and elseif
            results[i] = result;

            i++;
            xx();
        });

    }

}

}

Answer 4

尝试将结果放在像

这样的数组中

var i = 0;
var ajaxRes=[];
while (i < 4) {
    doAjaxReq().done(function (result) {
       ajaxRes.push(result);
    });
    i++
}

使用AJAX查询时使用或For循环

4 个答案: