javascript - 使用 AJAX 回调函数访问数组

Question

我正在尝试使用 AJAX 调用来更新页面上的一堆图像元素。要更新的元素列表保存在一个数组中，分配给每个图像的 URL 是通过 AJAX 从 PHP 页面检索的。

下面的代码不起作用，因为从 AJAX 调用中的回调函数调用时 imagesArray[i] 未定义 - 可能是由于 JavaScript 的异步特性。

var imagesArray = document.getElementsByClassName('swappableImages');

for (i = 0; i < imagesArray.length; i++) {
  var requestUrl = "http://example.com/getAnImageURL.php";

  getDataViaAJAX(requestUrl, function(data) {
    alert('img url=' + data.responseText);
    imagesArray[i].src = data.responseText;
  });
}

function getDataViaAJAX(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

在阅读周围的内容时，解决这个问题的一种方法似乎是使用闭包，但是闭包是我仍然无法理解的东西，我发现的例子有让我更加困惑。

那么，当 AJAX 函数返回时，如何更新数组中的每个元素？

<小时/>

请注意，已识别的“重复”问题是具有 jQuery 特定答案的问题的 jQuery 版本。我正在使用普通 JavaScript。

Answer 1

注意: 第一个示例/方法 - 在评论中引用 - 从答案中删除。

你可以试试这个:

var requestUrl = "http://example.com/getAnImageURL.php";

for (i = 0; i < imagesArray.length; i++) {
  (function(j) {
    getDataViaAJAX(requestUrl, function(data) {
      alert('img url=' + data.responseText);
      imagesArray[j].src = data.responseText;
    });
  })(i);
}