jQuery / Javascript：GET调用后变量未更新

Question

我正在尝试从文本文件读取并将其内部的信息放入数组。 但是，看来我做错了。

var Level = function(ctx) {
    this.ctx = ctx;
    this.lvlWidth = 0;
    this.lvlHeight = 0;

    this.map = [];


    this.loadLevel = function(){
    var start = 0;
    var end = 0;
    this.lvlHeight = 25;
    this.lvlWidth = 21;

    $.get("1.txt", function(data){
        start = data.indexOf("0");
        end = data.lastIndexOf("#");
        this.map = data.slice(start, end - 2).split(" ");
    }, "text");

    console.log(this.map);
   };
}; // end Level 

在控制台上，它说我的变量this.map是一个空数组。 它不会自我修改，我也不知道为什么。 我检查了其他答案，人们说如果不在函数外部声明变量（在我的情况下为地图），就会发生此问题，但您可以清楚地看到我这样做了。 具有讽刺意味的是，this.lvlWidth和this.lvlHeight DO分别更改为21和25。 谁能告诉我为什么地图不更新？

这是1.txt的信息（与该文件位于同一文件夹中）：

# startleveldata
0 0 0 0 0 0 0 0 0 113 21 113 0 0 0 0 0 0 0 0 0 
0 107 100 100 100 100 100 100 100 106 0 105 100 100 100 100 100 100 100 108 0 
0 101 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 101 0 
0 101 3 120 2 113 2 111 100 108 2 107 100 112 2 113 2 120 3 101 0 
0 101 2 2 2 101 2 2 2 101 2 101 2 2 2 101 2 2 2 101 0 
0 101 2 111 100 106 2 113 2 110 2 110 2 113 2 105 100 112 2 101 0 
0 101 2 2 2 2 2 101 2 2 2 2 2 101 2 2 2 2 2 101 0 
0 101 2 120 2 111 100 130 100 112 2 111 100 130 100 112 2 120 2 101 0 
0 101 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 101 0 
0 105 100 108 2 113 2 111 100 100 100 100 100 112 2 113 2 107 100 106 0 
0 0 0 101 2 101 2 2 0 0 10 0 0 2 2 101 2 101 0 0 0 
111 100 100 106 2 105 112 2 107 112 1 111 108 2 111 106 2 105 100 100 112 
20 0 0 0 2 0 0 2 101 11 12 13 101 2 0 0 2 0 0 0 20 
111 133 100 112 2 111 112 2 105 100 100 100 106 2 111 112 2 111 100 133 112 
0 101 2 2 2 0 0 2 0 0 0 0 0 2 0 0 2 2 2 101 0 
0 101 2 120 2 107 112 2 111 100 100 100 112 2 111 108 2 120 2 101 0 
0 101 2 2 2 101 2 2 0 0 4 0 0 2 2 101 2 2 2 101 0 
0 105 133 112 2 110 2 111 100 100 133 100 100 112 2 110 2 111 133 106 0 
0 0 101 2 2 2 2 2 2 2 101 2 2 2 2 2 2 2 101 0 0 
0 0 101 2 111 112 2 111 108 2 101 2 107 112 2 111 112 2 101 0 0 
107 100 106 2 2 2 2 2 101 2 101 2 101 2 2 2 2 2 105 100 108 
101 2 2 2 111 100 112 2 110 2 110 2 110 2 111 100 112 2 2 2 101 
101 3 120 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 120 3 101 
101 2 2 2 107 100 100 100 100 108 0 107 100 100 100 100 108 2 2 2 101 
105 100 100 100 106 0 0 0 0 110 21 110 0 0 0 0 105 100 100 100 106 
# endleveldata

编辑：我使它工作的家伙！ 问题是我需要调用一个回调函数，该函数将再次调用该函数。 按照用户@ ACOMIT001的建议，我在$ .get（）之后使用了.then（）函数。 我提取了$ get函数，将其放在主程序中，并将其放在.then（）函数中，并将其称为loadLevel（），然后它可以工作。 我无法真正解释原因，但这现在对我有效。 谢谢大家的帮助/

Answer 1

$ .get是一个异步方法。 它被调用后立即返回，而不是等待服务器的响应。 因此，为什么this.map将为空。

尝试这样的事情：

var that = this;

$.get("1.txt", function(data){
    start = data.indexOf("0");
    end = data.lastIndexOf("#");
    that.map = data.slice(start, end - 2).split(" ");
}, "text").then(function () { 
    console.log(that.map); 
});

同样如先前的回答所述，其范围也在变化。

Answer 2

我认为这是因为您的范围正在变化。 尝试这个：

var that = this;
....
 $.get("1.txt", function(data){
    start = data.indexOf("0");
    end = data.lastIndexOf("#");
    that.map = data.slice(start, end - 2).split(" ");
}, "text");

console.log(that.map);

http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/