javascript - 将父作用域中的变量传递给回调函数

Question

这更像是一个 JavaScript 闭包问题，而不是一个 Firebase 问题。在以下代码中，Firebase 回调无法识别父作用域中的变量 myArr。

function show_fb() {
    var myArr = [];
    var firebase = new Firebase('https://scorching-fire-6816.firebaseio.com/');
    firebase.on('child_added', function(snapshot) {
        var newPost = snapshot.val();
        myArr.push(newPost.user);
        console.log(myArr); // works
    });
    console.log(myArr); // doesn't work. myArr in the firebase.on callback is
                        // not altering myArr
    return myArr;
};

Answer 1

回调正在识别/修改 myArr 非常好。问题是当你的“不工作”-labeled console.log(myArr) 执行时，回调还没有触发。

让我们稍微修改一下您的代码:

var myArr = [];
function show_fb() {
    var firebase = new Firebase('https://scorching-fire-6816.firebaseio.com/');
    firebase.on('child_added', on_post_added); // steps 1-3
    console.log(myArr);                        // step 4
    return myArr;                              // step 5
};
function on_post_added(snapshot) {             // step 6
    var newPost = snapshot.val();
    myArr.push(newPost.user);                  // step 7
    console.log(myArr);                        // step 8
}

现在可能更容易看到发生了什么。

1. 您为 child_added 注册一个监听器，它将为添加到您的 Firebase 的每个帖子调用 on_post_added
2. 这将导致调用服务器，这可能需要很长时间才能返回
3. 与此同时，您的 JavaScript 代码继续并...
4. 记录数组，此时数组还是空的
5. 然后返回一个空数组
6. 现在在某个时候服务器返回新值并调用您的回调
7. 这意味着我们可以毫无问题地将它添加到数组中
8. 并将其记录到控制台显示预期值

像这样处理异步代码/回调需要一些时间来适应，但对于使用 Firebase 或任何其他类似 AJAX 或事件驱动的技术来说是至关重要的。将回调的代码放入一个单独的函数中有时可以更容易地了解正在发生的事情。

在 Firebase 的情况下，它也可能有助于意识到事件被称为 child_added 是有原因的。每当将 child 添加到 Firebase 时都会调用它，而不仅仅是在您首次注册回调时调用。所以几分钟后，当其他客户端添加一个 child 时，您的回调仍会触发，向 myArr 添加一个新 child 。在那个阶段，上面第 4 步和第 5 步中的代码将早已执行并且不会再次执行。

解决方案很简单:将添加 child 后您想做的任何事情放入您的回调中:

var myArr = [];
function show_fb() {
    var firebase = new Firebase('https://scorching-fire-6816.firebaseio.com/');
    firebase.on('child_added', on_post_added);
};
function on_post_added(snapshot) {
    var newPost = snapshot.val();
    myArr.push(newPost.user);
    console.log(myArr);
    // do whatever else you need to do for a new post
}