JQuery Ajax：動的なdiv要素のランダムな順序

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

要求約束の配列を作成し、元のデータと同じ順序で応答データを処理するために$.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 + '"/>'; 
   
       } 
   }