Question

好的，我对Javascript很陌生，我尝试使用firebase作为我正在制作的简单游戏的后端。

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

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

变量p1未正确分配。我怎么能绕过这个？

Answer 1

变量p1被完全分配。但是你在尚未填充的时候访问它。

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

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

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

在阅读Firebase之前

从Firebase阅读后

Firebase的结果......

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

原因是数据是从Firebase 异步加载的。因此，player1.on("value' 的行开始从Firebase加载数据。但由于这可能需要一些时间，因此浏览器会在语句后继续执行代码。然后，当Firebase的值可用时，它会使用snapshot的数据调用您的函数。

这种类型的异步加载在常见的Web编程中非常常见。要处理它，您必须反转代码的逻辑。而不是说：“首先我获得player1，然后我更新他的抽奖”，将其视为“每当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"]
    });
});

有关此问题的详细解释，请阅读Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

Firebase使用函数外的查询结果

1 个答案: