for循环内ajax调用的行为

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 循环始终会首先完成。尝试将 i 传递给您的回调。

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 async: false：

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

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