在父范围传递变量的回调函数 [英] Passing variable in parent scope to callback function

问题描述

这是更多的是JavaScript的关闭问题不是火力地堡的问题。在下面的code，在火力地堡回调是不承认父范围变量myArr，该

 函数show_fb（）{
    VAR myArr，该= [];
    VAR火力=新的火力地堡（https://scorching-fire-6816.firebaseio.com/'）;
    firebase.on（'child_added'，功能（快照）{
        变种newPost = snapshot.val（）;
        myArr.push（newPost.user）;
        执行console.log（myArr，该）; // 作品
    }）;
    执行console.log（myArr，该）; //不起作用。 myArr，该在firebase.on回调
                        //不改变myArr，该
    返回myArr，该;
};
 

解决方案

的回调确认/修改 myArr，该完美的罚款。问题是，当你的不工作标记的的console.log（myArr，该）执行，回调还没有解雇呢。

让我们改变℃的一点你$ C $：

  VAR myArr，该= [];
功能show_fb（）{
    VAR火力=新的火力地堡（https://scorching-fire-6816.firebaseio.com/'）;
    firebase.on（'child_added'，on_post_added）; //步骤1-3
    执行console.log（myArr，该）; //第4步
    返回myArr，该; //第5步
};
功能on_post_added（快照）{//第6步
    变种newPost = snapshot.val（）;
    myArr.push（newPost.user）; //第7步
    执行console.log（myArr，该）; //第8步
}
 

现在它可能是一个更容易一点，看看发生了什么事情。

1. 您注册一个监听器 child_added 将调用 on_post_added 对于添加到您的火力地堡<每一个岗位/ LI>
2. 这将导致一个呼叫到服务器，这可能需要的时间显著量返回
3. 同时你的JavaScript code继续和...
4. 日志的阵列，在这个阶段仍然是空
5. 然后由此返回一个空数组
6. 现在，在某些时候，服务器返回的新值（S）和您的回调函数
7. 这意味着我们可以将它添加到阵列中没有问题
8. 在它记录到控制台显示的预期值

处理异步code /像这样的回调需要一些时间来适应，但关键的是要与火力地堡或其他任何类似Ajax的或事件驱动的技术工作。把回调的code到一个单独的功能，有时使得它更容易一点，看看发生了什么事情。

在火力地堡的情况下，它也可能有助于实现该事件被称为 child_added 的一个原因。它被称为当一个孩子被添加到火力地堡，不只是当你第一次注册的回调。当一些其他客户端增加了一个孩子这么多分钟后，你的回调仍然会火，加入了新的孩子 myArr，该。在这个阶段的code在步骤4和5上面将长期已执行，不会再执行。

解决方法很简单：把你想做的事情后，孩子加入到你的回调什么：

  VAR myArr，该= [];
功能show_fb（）{
    VAR火力=新的火力地堡（https://scorching-fire-6816.firebaseio.com/'）;
    firebase.on（'child_added'，on_post_added）;
};
功能on_post_added（快照）{
    变种newPost = snapshot.val（）;
    myArr.push（newPost.user）;
    执行console.log（myArr，该）;
    //做任何你需要做的一个新职位
}
 

This is more of a JavaScript Closure question than a Firebase question. In the following code, the Firebase callback isn't recognizing the variable myArr in the parent scope.

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;
};

解决方案

The callback is recognizing/modifying myArr perfectly fine. The problem is that when your "doesn't work"-labeled console.log(myArr) executes, the callback hasn't fired yet.

Let's change your code a bit:

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
}

Now it might be a bit easier to see what's going on.

1. You register a listener for child_added that will call on_post_added for every post that is added to your Firebase
2. This will result in a call to the server, which may take a significant amount of time to return
3. Meanwhile your JavaScript code continues and...
4. Logs the array, which at this stage is still empty
5. And then thus returns an empty array
6. Now at some point the server returns the new value(s) and your callback is invoked
7. Which means we can add it to the array without problems
8. And logging it to the console shows the expected values

Handling asynchronous code/callbacks like this takes some getting used to, but is crucial to working with Firebase or any other AJAX-like or event driven technology. Putting the callback's code into a separate function sometimes makes it a bit easier to see what's going on.

In the case of Firebase it may also help to realize that the event is called child_added for a reason. It is called whenever a child is added to the Firebase, not just when you first register your callback. So minutes later when some other client adds a child, your callback will still fire, adding a new child to myArr. At that stage the code in steps 4 and 5 above will long have executed and will not execute again.

The solution is simple: put anything that you want to do after a child is added into your callback:

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
}

这篇关于在父范围传递变量的回调函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！