javascript - 如何使用 Firebase 对 HTML 进行异步更新

Question

我目前正在开展一个项目，该项目涉及根据 Firebase 是否在数据库中找到资源来更新一些 HTML。这是代码片段:

for(var i = 0; i<collection.length; i++){
    //Get the player
    var player = collection[i];

    //Create a new table row
    var row = document.createElement("TR");
    row.id = player.Id;

    //Add the player profile pic
    var imgNode = document.createElement("TD");
    var img = document.createElement("IMG");
    var photo = "https://usatftw.files.wordpress.com/2014/10/nfl_logo_new2.jpg?w=1000&h=750";
    playerbase.orderByKey().equalTo(player.Id).on('child_added', function(snap){

        photo = snap.val();

    });

    img.setAttribute("src", photo);
    img.setAttribute("width", "55px");
    img.setAttribute("height", "55px");
    imgNode.appendChild(img);
    imgNode.className = "player-photo";
    row.appendChild(imgNode);

    ... //Some more td is added below

问题是，每一行都使用最初分配给照片的默认图像，因为 firebase 调用花费的时间太长，并且 imgNode 在 firebase 完成之前已经附加到该行。我不是最有经验的 javascript 程序员，但是您将如何修复这样的问题，以便将更新检索到的资源放入行中？我是否需要使用 promises 或 async/await 之类的东西？

Answer 1

您需要稍微更改一下代码的顺序:

//Get the player
var player = collection[i];

//Create a new table row
var row = document.createElement("TR");
row.id = player.Id;

//Add the player profile pic
var imgNode = document.createElement("TD");
var img = document.createElement("IMG");
var photo = "https://usatftw.files.wordpress.com/2014/10/nfl_logo_new2.jpg?w=1000&h=750";
img.setAttribute("src", photo);
playerbase.orderByKey().equalTo(player.Id).on('child_added', (function(currentImage){
    return function(snap) {
       currentImage.setAttribute("src", snap.val());
    }
})(img));


img.setAttribute("width", "55px");
img.setAttribute("height", "55px");
imgNode.appendChild(img);
imgNode.className = "player-photo";
row.appendChild(imgNode);

现在让我试着解释一下这里发生了什么。您不必在回调函数中设置变量，这显然不起作用，您可以保存对每个图像对象的引用。当回调发生时，它有正确的对象来操作和改变状态。

这到底是怎么回事？
在你的循环中，你创建了很多图像。将它们视为 img1、img2、img3...imgN
现在对于每张图片我们都有一个回调函数:cb1, cb2, cb3...cbN
但是回调可能不会按顺序返回。所以可能是cb3,cb1,cb2...
我们所做的是创建一个新函数。该函数会将 img1 绑定(bind)到 cb1，将 img2 绑定(bind)到 cb2，等等。

由于 Firebase API 仍然期望接收一个带有一个参数的函数，我们返回它:

return function(snap) {
   currentImage.setAttribute("src", snap.val());
}

但现在当前图像始终是回调的校正图像。