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.

You're trying to use start before the asynchronous AJAX function has assigned anything to it. — Andy
– Andy, Commented Apr 7, 2014 at 13:02
I'm confused. I've called initGame() before startGameLoop(). I also used setTimeout() on startGameLoop thinking it was the asynchronous part causing the error but no luck. — Ryan
– Ryan, Commented Apr 7, 2014 at 13:06

antony · Accepted Answer · 2014-04-07 13:30:32Z

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

edited Apr 7, 2014 at 13:30

answered Apr 7, 2014 at 13:06

antony

2,90322 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nnnnnn · Accepted Answer · 2014-04-07 13:06:09Z

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.)

answered Apr 7, 2014 at 13:06

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

Andy · Accepted Answer · 2014-04-07 13:08:23Z

0

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

answered Apr 7, 2014 at 13:08

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Variable is undefined. JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related