Question

我需要连续使用这些值，但如果它已经在div中，我不希望它们回复。

我的尝试就在这里。我尝试构建一个数组并将这些值从firebase放到这里，但我仍然无法在html中看到。

  var fruits = [];
  var fetchPostsleft = function(postsRef, sectionElement,fruits) {
    postsRef .orderByChild('timeStamp').on('child_added', function(data) {
        console.log(data.val());
      var author = data.val().senderName;


        var containerElement2 = sectionElement.getElementsByClassName('posts-containerleft')[0];

        fruits.push(data.val().senderName);  
        console.log(fruits.length);


   });

  };


    fetchPostsleft(topUserPostsRef, topUserPostsSectionleft,fruits);
var fLen = fruits.length;
        console.log(fruits.length);

for (var i = 0; i < fLen; i++) {
   // text += "<li>" + fruits[i] + "</li>";
   topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore( createheaders(fruits[i], ""),
   topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].firstChild);
}

Answer 1

数据是从Firebase异步加载的。这意味着当你循环遍历数组时，它还没有被填充。通过用一些日志语句替换大部分代码，最容易看到这一点：

console.log("Before query");
postsRef.orderByChild('timeStamp').on('child_added', function(data) {
    console.log("In child_added");
});
console.log("After query");

如果您运行此代码段，则日志记录将为：

查询前

查询后

在child_added
中

这可能不是您预期的顺序，因为它与您的代码中日志语句的顺序不同。这是因为数据是从Firebase异步加载的，其余代码会在加载时继续。

如果您将回调转换为单独的功能，则会更容易看到：

function onChildAdded(data) {
    console.log("In child_added");
});

console.log("Before query");
postsRef.orderByChild('timeStamp').on('child_added', onChildAdded);
console.log("After query");

现在，您可以更轻松地看到前几行声明 onChildAdded函数。他们还没有运行它。我们只是将 in 中的函数传递给查询，这样查询就可以在获取数据时调用onChildAdded。

这是使用远程服务器进行Web编程时最常见的陷阱。但由于大多数现代Web都基于这种异步API，因此您必须学习它。

我发现有一种方法可以解决您的问题。您当前的代码基于＆＃34;首先获取帖子，然后将它们添加到HTML＆＃34;。但在异步编程中，最好先考虑开始获取帖子。当我们得到它们时，将它们添加到HTML＆＃34;。这转换为以下代码：

function fetchPostsleft(postsRef, sectionElement) {
  postsRef.orderByChild('timeStamp').on('child_added', function(data) {
    var author = data.val().senderName;
    topUserPostsSectionleft.getElementsByClassName('posts-containerleft')[0].insertBefore(createheaders(author, ""),
  });
};

fetchPostsleft(topUserPostsRef, topUserPostsSectionleft);

现在所有需要新数据的代码都在里面回调，所以它只在快照实际可用时运行。

javascript Firebase数据库获取值分组

1 个答案: