Question

所以我向NASA的APOD API发送请求并收回一系列信息，其中一部分是图片网址。我需要多次执行此操作，并且想知道如何将其设置为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 }

但是，我如何将这些imgs喂入类似的东西？希望这很清楚。

Answer 1

我不熟悉API，但您要么：

请求所有图片，让浏览器执行此操作，然后填写每个img元素或
有一个队列，并在完成上一个图像时请求下一个图像。

第一个选项可能是：

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

设置for循环以填充图像src＆＃39; s

1 个答案: