Question

  for (var i in arr) {
    console.log(i);
    $.get(searchURL, function (result) {
      console.log(result);
    }); // end of inner async request
  } // end of outer arr

在这种情况下，我正在看

1
2
3
result
result
result

但我的意图和预期是

1
result
2
result
3 
result

我认为这是因为每个ajax调用花费的时间比整个for循环的执行时间长。这是正确的吗？如果是这样，传统的做法是什么？

更新

我发现使用jQuery的$.each函数而不是for loop给出了预期的输出。 $.each函数是否适用于循环内的异步调用？

Answer 1

它启动所有三个异步ajax调用然后逐个调用，结果从它们返回。因为它们是异步的，所以在javascript的当前线程完成并返回到事件队列以开始提供到达的ajax结果之前，不会处理任何结果。你看到的结果只与ajax调用是异步的事实有关，而与它们返回结果所需的时间无关。

如果你想连续运行它们，那么你构造你的代码来调用ajax调用，然后，当它完成时，调用下一个ajax调用，依此类推：

function doAjax(arr) {
    var i = 0;

    function next() {
        if (i < arr.length) {
            console.log(i);
            // do something with arr[i] here
            $.get(searchURL, function (result) {
                 console.log(result);
                 i++;
                 next();
            }); // end of inner async request
        }
    }
    next();
}

Answer 2

ajax调用是异步的，JS是单线程的。这意味着无论服务器响应多快，for循环总是先完成。尝试将我传递给你的回调。

var responseHandle= function (i,result) {
      console.log(i, result);
    };

for (var i in arr {
    console.log(i);
    $.get(searchURL, responseHandle.bind(null,i));
}

Answer 3

$.get是异步的。如果你正在使用jQuery＆lt; 1.8你可以这样使用async: false：

$.ajax({
    type:'get',
    url: searchURL,
    async: false,
    complete: function(response){
        //done
    }
});

否则您可以使用jQuery's Deffered。

for循环中ajax调用的行为

3 个答案: