設置一個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 } 

但我怎麼養活這些img到那樣的東西？希望這很清楚。

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