javascript - Firebase 在函数外部使用查询结果

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

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

Before reading from Firebase

After reading from Firebase

Result from Firebase...

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

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

这种类型的异步加载在常见的 Web 编程中非常常见。要处理它，您必须反转代码的逻辑。不要说:“首先我得到player1，然后我更新他的抽牌”，而应将其视为“每当player1的值发生变化时，我就执行xyz”。

您通常通过将“then”代码移入回调函数来实现此目的:

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