Question

所以，我有一个在DOM完全加载时运行的init函数：

function init() 
{
    TerrainObj.load_terrain();
    TerrainObj.generate_display_layer(PlayerObj);
    GameObj.update();
    ScreenObj.draw_screen(TerrainObj);
    ScreenObj.update_screen(TerrainObj);
    mainloop();
}

第一种方法TerrainObj.load_terrain()生成一个AJAX请求：

load_terrain: function()
{
    var settings = {
        type: "GET",
        url: "data/map.txt",
        aysnc: false
    };

    $.ajax(settings).done(function(result) 
    {
        this.terrain = result.split("\n");
        for (var i = 0; i < this.terrain.length; i++)
        {
            this.terrain[i] = this.terrain[i].split("")
        }
        console.log(this.terrain);
    });
}

问题是，在我们的init()函数中，TerrainObj.load_terrain()后面的大多数方法都需要TerrainObj.terrain array的存在，但是在AJAX请求完成之前调用它们，该变量已填充。当每个函数运行以检查顺序时，我发出一条消息，我得到了这个：

Ran TerrainObj.load_terrain()
Ran ScreenObj.draw_screen()
Uncaught TypeError: Cannot read property '0' of undefined 
[Array[55], Array[55], ... ]

正如您可能看到的那样，需要TerrainObj.terrain的ScreenObj.draw_screen在请求完成之前运行，并且在尝试引用我们的对象时有TypeError。它尚未准备好！最后一条消息是console.log()方法中的load_terrain，表示.done函数后来运行。

在继续我的程序之前，我该怎么做才能等到AJAX请求完成？

Answer 1

Javascript是一种事件驱动语言。你没有主循环，但你有事件触发正在发生的事情。

此处，ajax调用的完成会触发后续的地形设置。因此将功能分成两部分：

init: function() 
{
    TerrainObj.load_terrain();
},
init_terrain: function()
{
    TerrainObj.generate_display_layer(PlayerObj);
    GameObj.update();
    ScreenObj.draw_screen(TerrainObj);
    ScreenObj.update_screen(TerrainObj);
    mainloop();
},
load_terrain: function()
{
    var settings = {
        type: "GET",
        url: "data/map.txt",
        aysnc: false
    };

    $.ajax(settings).done(function(result) 
    {
        this.terrain = result.split("\n");
        for (var i = 0; i < this.terrain.length; i++)
        {
            this.terrain[i] = this.terrain[i].split("")
        }
        this.init_terrain();
    });
}

Answer 2

检查以下代码块中的评论部分

    $.ajax(settings).done(function(result) 
    {
        this.terrain = result.split("\n");
        for (var i = 0; i < this.terrain.length; i++)
        {
            this.terrain[i] = this.terrain[i].split("")
        }
        /*******************************************/
        //Place a new function call here, to the function that contains the calls to your 
        //functions, or other logic, that require the array to be populated.
        /*******************************************/
    });

我怎么能等到我的AJAX请求完成？

2 个答案: