使用AJAX回调函数访问数组 - Accessing an array from with an AJAX callback function

Accessing an array from with an AJAX callback function

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

我下面的代码不工作，因为imagesArray[i]是未定义的，当它从AJAX调用的回调函数调用-由于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() {}

在阅读周围似乎解决这个问题的一种方法是使用closure，然而闭包是我仍然没有设法得到我的头周围的东西，我发现的例子只是让我进一步困惑。

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

请注意，已确定的"重复"问题是带有jQuery特定答案的问题的jQuery版本。

注: 第一个例子/方法-在评论中提到-从回答中删除。

你可以试试:

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);
}