全局未定义的匿名回调函数

时间:2014-03-17 02:08:31

标签: javascript

我有一些javascript函数。全局var在f1中初始化,然后调用f2,它们明显定义,因为它稍后被调用。但是,它在f2里面的匿名函数里面未定义。

var global = [];

function f1() {
    global = [{id: 1}, {id: 2}, {id: 3}];
    f2();
}

function f2() {

    // HERE global = [{id: 1}, {id: 2}, {id: 3}]

    for(var i = 0; i < global.length; i++) {

       f3(function(thisIsSomeJSONdata) {

        console.log(global[i].id); // cannot read id of undefined

        // HERE global[0], global[1], global[2] === undefined

        global[0].name = "A";
        global[1].name = "B";
        global[2].name = "C";
       });
    }
}

function f3(callback) {

    var thisIsSomeJSONdata;
    // timeout to simulate AJAX delay
    setTimeout(function(){
      callback(thisIsSomeJSONdata);
    },3000);
}

即使匿名函数复制变量并在其中创建新的上下文,这些值也应该如前所定义。

1 个答案:

答案 0 :(得分:2)

异步调用是另一回事。您的for循环在调用callback之前执行,因此i一旦被调用就会计算为3。 你必须为它提供一个闭包,如下所示:

var global = [];

function f1() {
    global = [{id: 1}, {id: 2}, {id: 3}];
    f2();
}

function f2() {

    // HERE global = [{id: 1}, {id: 2}, {id: 3}]

    for(var i = 0; i < global.length; i++) {

       (function(i) { 
         f3(function(thisIsSomeJSONdata) {
         console.debug(global);
         console.log(global[i].id); // cannot read id of undefined

         // HERE global[0], global[1], global[2] === undefined

         global[0].name = "A";
         global[1].name = "B";
         global[2].name = "C";
        });
       })(i);
    }
}

function f3(callback) {

    var thisIsSomeJSONdata;
    // timeout to simulate AJAX delay
    setTimeout(function(){
      callback(thisIsSomeJSONdata);
    },3000);
}