javascript - JQuery Ajax : Random order of dynamic div elements

Question

我有一个需要在页面上呈现的图像列表。图片来自第三方 API。我得到列表并使用 for 循环显示图像。

var count = imageIds.length;
for (var i = 0; i < count; i++) {
GetImage(imageIds[i]);
}

function GetImage(imageId){
//Ajax request here. Returns string "data" for image.
//Once the request finishes, I update the div's content like:
_targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + data + '"/>';
}

问题是图像没有按顺序渲染。上面的代码根据完成的请求以任意顺序排列图像。我需要渲染图片 1，然后是图片 2，然后是图片 3，依此类推...

修复了什么？

Answer 1

创建请求 promise 数组并使用 $.when()按照与原始数据相同的顺序处理响应数据

var imageIds = [1,2,3,4,5];

var promiseArray = imageIds.map(getImage);

$.when.apply(null, promiseArray).then(function(){
   // array of data received for each request, in same order as original data array
   var array = [].slice.call(arguments);

   array.forEach(function(item){
      $('body').append('<p> Item #' + item.id +'</p>')
   })
}).fail(function(){
   // one or more of the requests failed...handle error 
});

function getImage(imageId){ 
   var url ='https://simple-express-cors-endpoint-be970g7kgnc3.runkit.sh';
   // return the request promise
   return $.post(url, {id: imageId}).then(function(data){
       console.log('Request for #'+imageId+' completed');
       // resolve with response data
       return data;
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>