Firebase使用查询结果功能 [英] Firebase use query result outside function

问题描述

好吧，我对Javascript很新，我试图用 firebase 作为我制作的简单游戏的后端。

我有以下非常简单的javascript代码访问我的数据：
$ b $ p $ code

 
 var myData = new Firebase（https://theurl.firebaseio.com/Player/results）; 
 var p1; 
 var player1 = myData.child（1）; 
 player1.on（value，function（snapshot）{
 p1 = snapshot.val（）; 
 console.log（p1 [Name] ++ p1 [绘制]）; 
}）; 
 / * 
这行似乎是问题，我怎样才能在上面的函数之外分配查询的结果呢？ * / 
 p1 [Draws] + = 1; 
 player1.update（{
Draws：p1 [Draws] 
}）; 
 
  
 

变量 p1 没有正确分配。如何解决这个问题？

解决方案

变量 p1 非常好。但是，您正在访问它尚未填充。

为了看看发生了什么，让我们添加一些日志语句到您的代码： p>

  var myData = new Firebase（https://theurl.firebaseio.com/Player/results）; 
 var p1; 
 var player1 = myData.child（1）; 
 console.log（'从Firebase读取之前'）; 
 player1.on（value，function（snapshot）{
 p1 = snapshot.val（）; 
 console.log（'Firebase结果：'+ p1 [Name]] ++ p1 [Draws]）; 
}）; 
 console.log（'从Firebase读取后'）; 
 
 p1 [Draws] + = 1; 
 player1.update（{
Draws：p1 [Draws] 
}）; 
  

运行此代码时，您将看到输出为：

在从Firebase读取之前

从Firebase读取数据之后

来自Firebase的结果...

这可能不是您预期的顺序。

原因是数据是从Firebase 异步加载的。因此，使用 player1.on（value ）开始加载来自Firebase的数据，但由于这可能需要一段时间，因此浏览器将继续执行然后当来自Firebase的值可用时，它会用 snapshot 这个数据调用你的函数。

这种类型的异步加载在常见的Web编程中非常常见，为了解决这个问题，你必须颠倒你的代码的逻辑，而不是说：首先我得到player1，然后我更新他的draws，想想它作为只要player1的值改变，我做xyz。

你经常通过移动然后代码到回调函数：

  var myData = new Firebase（https://theurl.firebaseio.com/Player/results）; 
 var p1; 
 var player1 = myData.child（1）; 
 player1.on（value，function（snapshot）{
 p1 = snapshot.val ）; 
 p1 [Draws] + = 1; 
 player1.update（{
Draws ：p1 [Draws] 
}）; 
}）; 
  

有关这个问题的一个很好的解释，请阅读为什么我的变量没有改变后，我修改它在一个函数内？ - 异步代码参考

OK, I'm quite new to Javascript and I'm trying to use firebase as the back end for a simple game I'm making.

I have the following very simple javascript code accessing my data:

    var myData = new Firebase("https://theurl.firebaseio.com/Player/results");
    var p1;
    var player1 = myData.child("1");
    player1.on("value", function(snapshot) {
        p1 = snapshot.val();  
        console.log(p1["Name"]+ " " + p1["Draws"]);
    });
    /*
    This line seems to be the problem, how do I assign the result of the query outside the above function? */
    p1["Draws"] += 1;
    player1.update({
        "Draws": p1["Draws"]
    });

The variable p1 doesn't get assigned properly. How can I get around this?

解决方案

The variable p1 gets assigned perfectly fine. But you're accessing it at a time it hasn't been populated yet.

To see what is happening, let's add a few log statements to your code:

var myData = new Firebase("https://theurl.firebaseio.com/Player/results");
var p1;
var player1 = myData.child("1");
console.log('Before reading from Firebase');
player1.on("value", function(snapshot) {
    p1 = snapshot.val();  
    console.log('Result from Firebase: '+p1["Name"]+ " " + p1["Draws"]);
});
console.log('After reading from Firebase');

p1["Draws"] += 1;
player1.update({
    "Draws": p1["Draws"]
});

When you run this code, you will see that the output is:

Before reading from Firebase

After reading from Firebase

Result from Firebase...

This is probably not the order you expected.

The reason for this is that the data is loaded from Firebase asynchronously. So the line with player1.on("value' starts loading the data from Firebase. But since this may take some time, the browser continues executing the code after the statement. Then when the value from Firebase is available it calls your function with a snapshot of that data.

This type of asynchronous loading is very common in common web programming. To deal with it, you have to invert the logic of your code. Instead of saying: "first I get player1, then I update his draws", think of it as "whenever the value of player1 changes, I do xyz".

You often do this by moving the "then" code into the callback function:

var myData = new Firebase("https://theurl.firebaseio.com/Player/results");
var p1;
var player1 = myData.child("1");
player1.on("value", function(snapshot) {
    p1 = snapshot.val();  
    p1["Draws"] += 1;
    player1.update({
        "Draws": p1["Draws"]
    });
});

For a great explanation on this problem, read Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

这篇关于Firebase使用查询结果功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！