Variable is undefined. JS

Question

My code keeps giving me 'start' variable undefined error. I am defining it in the initGame funcion, so I don't know what the problem is. Here's the relevant code.

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

I should also mention that the code was working fine before when I had the data hardcoded and wasn't reading from the server, i.e. before I implemented the initGame() function.

Data is received from the server without any problems.

Answer 1

"I am defining it in the initGame function"

No you're not. You're defining it within the success handler of an ansynchronous Ajax function that is in your initGame() function. The success handler will not be called until later, after initGame() finishes and after the code that called initGame() finishes.

Try moving the call to startGameLoop() into the Ajax success handler so that the loop won't start until initialisation is truly finished, i.e., after the Ajax response has been received. (You don't show the implementation of init_mouse(), but you may need to move the call to that function too.)

Answer 2

Your makeboard() function is being run before the ajax request has returned. Your start variable is assigned in the callback of your ajax request and this will probably run after after makeboard() does, hence why you're getting an undefined error.

Try running startGameLoop() in your callback, instead of running it directly after initGame().

E.g. The below would something like this in your console.

"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 3

Try using a callback in your AJAX function:

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