1

したがって、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 リクエストを作成しますL:

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], ... ]

おそらくご覧のScreenObj.draw_screenとおり、TerrainObj.terrain を必要とする は、リクエストが完了する前に実行さTypeErrorれ、オブジェクトを参照しようとすると が発生します。まだ準備ができていません！最後のメッセージはメソッドconsole.log()からのもので、関数が後で実行されることを示します。load_terrain.done

プログラムを続行する前に、AJAX 要求が完了するまで待機するにはどうすればよいですか?

4

2 に答える 2

5

Javascript はイベント駆動型言語です。メインループはありませんが、何が起こっているかをトリガーするイベントがあります。

ここでは、ajax 呼び出しが完了すると、その後の地形の設定がトリガーされます。したがって、関数を 2 つに分けます。

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();
    });
}
于 2013-09-28T12:22:57.683 に答える