JQuery Ajax：动态div元素的随机顺序

Question

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

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

创建请求的承诺的阵列，并且使用$.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>

Answer 2

有2个选项保存请求的顺序，并响应。

1. 渲染最后所有的图像后，所有的人都被加载

   var count = imageIds.length; 
   var responses = []; 
   var completedCount = 0; 
   
   for (var i = 0; i < count; i++) { 
       GetImage(imageIds[i], i); 
   } 
   
   function GetImage(imageId, requestIndex){ 
       // Ajax query goes here 
       // Push the response and the requestIndex into our responses Array 
       responses.push({ index: requestIndex, data: data }); 
       completedCount = completedCount + 1; 
       // Render the images only after all responses have been obtained 
       if(completedCount === count) { 
        renderAllImages(); 
       } 
   } 
   
   function renderAllImages() { 
       // Sort responses based on the request Index so that we preserve ordering 
       responses.sort(function(a, b) { 
        var keyA = a.requestIndex, 
        var keyB = b.requestIndex; 
        // Compare the 2 dates 
        if(keyA < keyB) return -1; 
        if(keyA > keyB) return 1; 
        return 0; 
       }); 
   
       // Render all images finally after sorted 
       for(var i=0; i<responses.length; i++) { 
        _targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + responses[i].data + '"/>'; 
   
       } 
   } 
   

2. 渲染图像，因为它们加载，并保留其请求的发送顺序

   var count = imageIds.length; 
   var responses = []; 
   var completedCount = 0; 
   
   for (var i = 0; i < count; i++) { 
       GetImage(imageIds[i], i); 
   } 
   
   function GetImage(imageId, requestIndex){ 
       // Ajax query goes here 
       // Push the response and the requestIndex into our responses Array 
       responses.push({ index: requestIndex, data: data }); 
       completedCount = completedCount + 1; 
       // Render all the images we have loaded so far after each response 
       renderAllImages(); 
   } 
   
   function renderAllImages() { 
       // Sort responses based on the request Index so that we preserve ordering 
       responses.sort(function(a, b) { 
        var keyA = a.requestIndex, 
        var keyB = b.requestIndex; 
        // Compare the 2 dates 
        if(keyA < keyB) return -1; 
        if(keyA > keyB) return 1; 
        return 0; 
       }); 
   
       // Render all images finally after sorted 
       for(var i=0; i<responses.length; i++) { 
        _targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + responses[i].data + '"/>'; 
   
       } 
   }