JQuery Ajax : Ordre aléatoire des éléments div dynamiques

Question

J'ai une liste d'images que je dois rendre sur la page. L'image provient d'une API tierce. Je récupère la liste et j'utilise une boucle for pour afficher l'image.

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

Le problème est que les images ne sont pas affichées dans l'ordre. Le code ci-dessus classe les images dans n'importe quel ordre en fonction de la requête finie. J'ai besoin de rendre l'image 1, puis l'image 2, puis l'image 3 et ainsi de suite...

Quelle est la solution ?

Answer 1

Créer un tableau de promesses de requête et utiliser $.when() traiter les données de la réponse dans le même ordre que les données originales

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

Il existe deux options pour préserver l'ordre des demandes et des réponses.

1. Rendu final de toutes les images une fois qu'elles ont toutes été chargées

   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. Rendre les images au fur et à mesure de leur chargement, en préservant l'ordre dans lequel les requêtes ont été envoyées.

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