Question

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

下面的代码不起作用，因为在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() {}

在阅读时，似乎解决这个问题的一种方法是使用closure，但是闭包是我仍然无法理解的事情，我发现的例子让我很困惑进一步

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

请注意，已识别的“重复”问题是具有jQuery特定答案的问题的jQuery版本。我正在使用vanilla 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);
}

使用AJAX回调函数访问数组

1 个答案: