Wie sortiere ich Firebase getDownloadURL() Ergebnisse mit Javascript?

Question

Diese Funktion Bilder von Feuerbasis Urls anzeigt:

function updateTimeline(){ 
    var ul = document.querySelector("#timeline ul"); 
    ul.innerHTML = ""; 
    var db = firebase.database().ref("phoodos/"); 
    var list = db.orderByChild("timeStamp"); 
    list.on("child_added", function(child) { 
     var selfie = child.val(); 

     // Retrieve the image file 
     var storageRef = firebase.storage().ref(); 
     var imageRef = storageRef.child(selfie.path); 

     imageRef.getDownloadURL().then(function(url){ 
      var li = "<li><figure>"; 
      li += "<img src='" + url + "' width='100%' alt='Phoodo'>"; 
      li += "<figcaption>By " + selfie.user + ": " + selfie.timeStamp + "</figcaption>"; 
      li += "</figure></li>"; 
      ul.innerHTML += li; 
     }) 
    }); 
} 

Ergebnisse orderByChild sortiert werden, sondern ergibt sich aus getDownloadURL() sind nicht sortiert.

Wie kann ich die von getDownloadURL() abgerufenen Bilder sortieren, bevor ich sie zu meinem HTML hinzufüge?

Answer 1

Ein Trick ist, den HTML-Code in der richtigen Reihenfolge einzufügen:

var ul = document.querySelector("#timeline ul"); 
ul.innerHTML = ""; 
var db = firebase.database().ref("phoodos/"); 
var list = db.orderByChild("timeStamp"); 
list.on("child_added", function(child) { 
    var selfie = child.val(); 

    // Retrieve the image file 
    var storageRef = firebase.storage().ref(); 
    var imageRef = storageRef.child(selfie.path); 

    var li = document.createElement("li"); 
    ul.appendChild(li); // this ensures the <li> is in the right order 

    imageRef.getDownloadURL().then(function(url){ 
     var html = "<figure>"; 
     html += "<img src='" + url + "' width='100%' alt='Phoodo'>"; 
     html += "<figcaption>By " + selfie.user + ": " + selfie.timeStamp + "</figcaption>"; 
     html += "</figure>"; 
     li.innerHTML = html; 
    }) 
});