變量未定義。 JS

Question

我的代碼不斷給我“開始”變量未定義的錯誤。 我在initGame函數中定義它，所以我不知道問題出在哪里。 這是相關的代碼。

$( document ).ready(function(){
var ctx = $('#myCanvas')[0].getContext("2d");
var WIDTH = $('#myCanvas')[0].width;
var HEIGHT = $('#myCanvas')[0].height;

//...some variables
var gaps = new Point(5, 5)
var start;
//...more variables

//class Point
function Point(x, y){
    this.x = x;
    this.y = y;
};

//...functions not using variable 'start'

function initGame(){
        $.ajax({
            type: "Get",
            url: "handler/initGameHandler/",
            dataType: 'json',
            success: function(response, e) {
              //do something here if everything goes well
                var width = response["width"]
                var height = response["height"]

                grid_size = new Point(width, height)
                x = gaps.x * grid_size.x
                y = gaps.y*grid_size.y    
                start = new Point((WIDTH - x) / 2,
                                      HEIGHT - y);

                indicator_x = start.x + padding + chip_radius
            },
            error: function(data) {
                alert("error")
            }
        });
}

function startGameLoop() {
    return setInterval(draw, 10);
}


function onMouseMove(evt) {
    if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
        temp = evt.pageX - canvasMinX;

        var begin_x = start.x + padding
        var last_x = start.x + board_size.x - padding
        //code not using start 
    }
}

function mouseClick(evt){
    if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
        temp = evt.pageX - canvasMinX;
        var begin_x = start.x + padding
        var last_x = start.x + board_size.x - padding
        if (temp >= begin_x && temp <= last_x) {
            for (var i=0; i <= grid_size.x; i++) {
                var x = start.x + chip_radius + padding
                //code not using 'start'     
            }
        }
    }

}

function makeBoard(){
    rect(start.x, start.y, board_size.x, board_size.y); //throws error here

    var x = start.x + chip_radius + padding;
    var y = start.y + chip_radius + padding;        
};





function draw(){
    //code
    makeBoard()
    //code
}

initGame()
startGameLoop()
init_mouse()
});

我還應該提到，在對數據進行硬編碼且未從服務器讀取數據之前，即在實現initGame（）函數之前，代碼運行良好。

從服務器接收到的數據沒有任何問題。

Answer 1

在ajax請求返回之前，正在運行您的makeboard()函數。 您的start變量是在ajax請求的回調中分配的，它可能會在makeboard()執行，因此為什么會出現未定義的錯誤。

嘗試在回調中運行startGameLoop() ，而不是在initGame()之后直接運行它。

例如，下面的內容在您的控制台中是這樣的。

“ 1”

“ 3”

“ 4”

“ 2”

    console.log('1');    // I run first

    $.ajax({
         url: "/getMyData",
         success: function () {
             console.log('2');  // I run last
         }
    });

    console.log('3');  // I run 2nd
    console.log('4');  // I run 3rd

Answer 2

“我在initGame函數中定義它”

不你不是。 您是在initGame()函數中的異步Ajax函數的成功處理函數中定義它的。 直到稍后，在initGame()完成之后以及在調用initGame()的代碼完成之后，才會調用成功處理程序。

嘗試startGameLoop()的調用移到Ajax成功處理程序中，以便直到真正完成初始化（即，在收到Ajax響應之后），循環才開始。 （您沒有顯示init_mouse()的實現，但是您可能也需要將調用移至該函數。）

Answer 3

嘗試在AJAX函數中使用回調：

function initGame(callback){
  $.ajax({
    type: "Get",
    url: "handler/initGameHandler/",
    dataType: 'json',
    success: function(response, e) {
      // your code
      start = new Point((WIDTH - x) / 2, HEIGHT - y);
      indicator_x = start.x + padding + chip_radius
      callback();
    }...

initGame(function () {
  startGameLoop();
  init_mouse();
});