javascript - 设置一个 for 循环来填充图像 src

Question

因此，我向 NASA 的 APOD API 发送请求并接收回一组信息，其中一部分是图像 url。我需要多次执行此操作，并且想知道如何将其设置为 for 循环，或者只是一个函数(？)。 HTML 是这样的:

<img id="apod1">
<img id="apod2">
<img id="apod3">
...etc

JavaScript 是这样的:

// APOD1 XML REQUEST
var apod1Url = "https://api.nasa.gov/planetary/apod?concept_tags=True";
var apod1Xml = new XMLHttpRequest();
apod1Xml.open('GET', apod1Url, true);
apod1Xml.send(null);

// APOD1 URL FETCH AND IMAGE RENDER
apod1Xml.onreadystatechange=function() {
    if (apod1Xml.readyState==4 && apod1Xml.status==200) {
        var apod1Parse = JSON.parse(apod1Xml.responseText);
        document.getElementById('apod1').src = apod1Parse.url;
        console.log(apod1Parse.url);
    }
}

我知道你可以设置一个 for 循环，例如:

for (i) { do stuff }

但是我如何将这些图像输入到类似的东西中呢？希望这已经足够清楚了。

Answer 1

我不熟悉 API，但你也不熟悉:

1. 请求所有图像，让浏览器完成工作，然后填充每个 img 元素或
2. 排好队，在完成上一张图片后询问下一张图片。

第一个选项可能类似于:

var imgIds = [ 'apod1', 'apod2', 'apod3' ];
for (var i = 0; i < imgIds.length; i++) {
    (function(id) {
        // do request

        req.onreadystatechange=function() {
            if (apod1Xml.readyState==4 && apod1Xml.status==200) {
                var apod1Parse = JSON.parse(apod1Xml.responseText);
                document.getElementById(id).src = apod1Parse.url;
                console.log(apod1Parse.url);
            }
        }
    })(imgIds[i]);
}  

第二个选项仅略有不同。当最后一个请求完成时，您删除 for 并处理数组的下一个元素。

var imgIds = [ 'apod1', 'apod2', 'apod3' ];
function getNextImage() {
    if (imgIds.length == 0) {
        return;
    }

    // do request

    var id = imgIds.shift();
    req.onreadystatechange=function() {
        if (apod1Xml.readyState==4 && apod1Xml.status==200) {
            var apod1Parse = JSON.parse(apod1Xml.responseText);
            document.getElementById(id).src = apod1Parse.url;
            console.log(apod1Parse.url);

            // process next
            getNextImage();
        }
    }
}

// start with first image
getNextImage();