在for循环中的AJAX调用不会将值返回到正确的数组位置

Question

我需要使用AJAX获取一系列页面，并将它们放入一个数组中，其中它们在数组中的给定位置等于for循环的i (这是一个用于博客页面的类似缓存的函数，for循环的范围是完全可变的)。我正在做类似于下面的事情：

var bongo = new Array();

for (i = 0; i < 10; i++) {

    jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString, success: function(request) { bongo[i] = request } })

}

问题是，除非我将async: false添加到.ajax选项中(这将使它...SJAX?)，这会导致请求基本上暂停浏览器，这与我正在尝试做的事情相反，成功回调中的i将始终为11，而我当然希望它将返回的数据倒入从0到10的数组的每个槽中。

我试着用下面的代码替换这一行：

bongo[i] = jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString }).responseText

但这并没有什么不同。

Answer 1

你需要一个闭包：

var bongo = [];
for (i = 0; i < 10; i++)
{

  (function(i)
    {
      jQuery.ajax(
        {
          type: "GET",
          url: "http://localhost",
          data: queryString,
          success: function(request) { bongo[i] = request } 
        });  
    })(i);
}

循环是内联函数阻塞人们的第一个地方。稍后才会调用bongo[i] = result。此时i的值是不同的(最有可能是11)。如果您想“捕获”或“捕获”i的当前值，则需要创建一个新的作用域。在javascript中要做到这一点，唯一的方法是使用另一个函数。

Answer 2

尝试：

var bongo = [];
for (i=0; i<10; i++) {
  $.get("http://localhost", function(result) {
    bongo.push(result);
  }
}

这样，每个结果都会被简单地推送到数组上，从而解决了数组索引必须正确的问题。然而，顺序并不能得到保证。如果这是一种需求，那么您需要另一种方法。

有多种方法可以解决这个问题。这里有一个:为你的回调创建对象来保存状态。下面是一个示例：

function Callback(array, index, result) {
  this.array = array;
  this.index = index;
  this.result = result;
  var obj = this;
  this.func = function() {
    obj.array[obj.index] = obj.result;
  };
}

$(function() {
  var arr = [];
  for (var i=0; i<4; i++) {
    var obj = new Callback(arr, i, "result" + i);
    setTimeout(obj.func, (5-i) * 100);
  }
  setTimeout(function() {
    console.log(arr);
  }, 500);
});

所以在你的例子中：

function Callback(array, index) {
  this.array = array;
  this.index = index;
  var obj = this;
  this.callback = function(result) {
    obj.array[obj.index] = result;
  };
}

var bongo = [];
for (i=0; i<10; i++) {
  var ob = new Callback(bongo, i);
  $.get("http://localhost", ob.callback);
}

基本上，上面的方法将所有数据保存到一个对象中，因此每个回调函数都可以访问正确的信息。

此外，请记住，大多数浏览器限制并发AJAX请求的数量，通常为每个主机2个。