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 + '"/>'; 
   
       } 
   }