Доступ к массиву с помощью функции обратного вызова AJAX

Question

Я пытаюсь использовать вызов AJAX для обновления группы элементов изображения на странице. Список элементов для обновления хранится в массиве, а URL-адреса, назначаемые каждому изображению, извлекаются со страницы PHP через AJAX.

Код, который у меня ниже, не работает, потому что 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 конкретные ответы. Я использую ванильный 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); 
}