如何使用 javascript 对 firebase getDownloadURL() 结果进行排序？

Question

此函数正在显示来自 firebase url 的图像：

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;
        })
    });
}

orderByChild 的结果已排序，但 getDownloadURL() 的结果未排序。

如何在添加到我的 html 之前对 getDownloadURL() 检索到的图像进行排序？

Answer 1

一个技巧是以正确的顺序插入 HTML：

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;
    })
});