如何等待我的AJAX請求完成？

Question

因此，我有一個init函數在DOM完全加載時運行：

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 requestL：

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 。 還沒准備好！ 最后一條消息是來自load_terrain方法的console.log() ，指示.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.
        /*******************************************/
    });