Javascript 变量未定义。JS

我的代码不断给我“start”变量未定义的错误。我在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()
});

$（文档）.ready（函数（）{
var ctx=$（'#myCanvas'）[0].getContext（“2d”）；
var WIDTH=$（'#myCanvas'）[0].WIDTH；
var HEIGHT=$（'#myCanvas'）[0]。高度；
//…一些变量
var间隙=新点（5,5）
var启动；
//…更多变量
//类点
功能点（x，y）{
这个.x=x；
这个。y=y；
};
//…函数未使用变量“start”
函数initGame（）{
$.ajax({
键入：“获取”，
url:“handler/initGameHandler/”，
数据类型：“json”，
成功：功能（响应，e）{
//如果一切顺利，在这里做点什么
变量宽度=响应[“宽度”]
变量高度=响应[“高度”]
网格大小=新点（宽度、高度）
x=间隙.x*网格大小.x
y=间隙.y*网格大小.y
开始=新点（（宽度-x）/2，
高度-y）；
指示器x=起始点x+填充+切屑半径
},
错误：函数（数据）{
警报（“错误”）
}
});
}
函数startGameLoop（）{
返回设置间隔（抽签，10）；
}
MouseMove（evt）的功能{
if（evt.pageX>canvasMinX&&evt.pageXcanvasMinX&&evt.pageX=开始温度（&T）
“我在initGame函数中定义它”

不，您不是。您是在
initGame（）
函数中的ansynchronous Ajax函数的成功处理程序中定义的。成功处理程序将在
initGame（）
完成后以及调用
initGame（）的代码完成后才会调用

尝试将对
startGameLoop（）
的调用移动到Ajax成功处理程序中，以便在初始化真正完成之前（即在收到Ajax响应之后）循环不会启动。（您不会显示
init_mouse（）
的实现，但您可能也需要将调用移动到该函数。）

“我在initGame函数中定义它”

不，您不是。您是在
initGame（）
函数中的ansynchronous Ajax函数的成功处理程序中定义的。成功处理程序将在
initGame（）
完成后以及调用
initGame（）的代码完成后才会调用

尝试将对
startGameLoop（）
的调用移动到Ajax成功处理程序中，以便在初始化真正完成之前（即在收到Ajax响应之后）循环不会启动。（您不会显示
init_mouse（）
的实现，但您可能也需要将调用移动到该函数。）

“我在initGame函数中定义它”

不，您不是。您是在
initGame（）
函数中的ansynchronous Ajax函数的成功处理程序中定义的。成功处理程序将在
initGame（）
完成后以及调用
initGame（）的代码完成后才会调用

尝试将对
startGameLoop（）
的调用移动到Ajax成功处理程序中，以便在初始化真正完成之前（即在收到Ajax响应之后）循环不会启动。（您不会显示
init_mouse（）
的实现，但您可能也需要将调用移动到该函数。）

“我在initGame函数中定义它”

不，您不是。您是在
initGame（）
函数中的ansynchronous Ajax函数的成功处理程序中定义的。成功处理程序将在
initGame（）
完成后以及调用
initGame（）的代码完成后才会调用

尝试将对
startGameLoop（）
的调用移动到Ajax成功处理程序中，以便在初始化真正完成之前（即在收到Ajax响应之后）循环不会启动。（您不会显示
init_mouse（）
的实现，但您可能也需要将调用移动到该函数。）
您的
makeboard（）
函数在ajax请求返回之前运行。您的
start
变量被分配到ajax请求的回调中，这可能会在
makeboard（）
之后运行，因此您会收到未定义的错误

尝试在回调中运行
startGameLoop（）
，而不是直接在
initGame（）之后运行它

例如，在您的控制台中，以下内容可能与此类似

“1”

“3”

“4”

“2”

您的
makeboard（）
函数是在ajax请求返回之前运行的。您的
start
变量是在ajax请求的回调中分配的，这可能会在
makeboard（）
之后运行，因此会出现未定义的错误

尝试在回调中运行
startGameLoop（）
，而不是直接在
initGame（）之后运行它

例如，在您的控制台中，以下内容可能与此类似

“1”

“3”

“4”

“2”

您的
makeboard（）
函数是在ajax请求返回之前运行的。您的
start
变量是在ajax请求的回调中分配的，这可能会在
makeboard（）
之后运行，因此会出现未定义的错误

试试r
    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

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();
});