up vote 0 down vote favorite

I am still trying to figure all this out and I am coming across a really weird error.

I was using getJSON but after searching for solutions to this problem, I found that it was better to try to use the AJAX function (for error capturing -> which isnt firing).

Using breakpoints in firebug, if I go slowly through the running code, it works (mostly) fine (just need to change some coordinates for better drawing). But if I let it run at normal speed, it attempts to do the callback before the json object is returned. The firebug console says everything works ok (code 200), but when examining the jobj inside ship object/function it appears to be "undefined or null"

Following the breakpoints, the ajax calls seem to be going to "error" and not "success". But it isn't firing the alert...

Also, the response takes like 300-500ms.... is that normal? or do I need to find a better server?

Edited Code: 

var init = (function(){
            thisplayer = new player();
            jQuery.ajax({type: "GET", url: "shipdata.php", processData: true, data: {shipid:1}, dataType: "json",
                success: function(json) {
                    var pship = new ship(json);
                    player_ship = $.extend(thisplayer, pship);
                    starfield = new starfield();
                    for(var i = 0; i < player_ship.enemytotal; i++) {
                            $.ajax({
                                type: "GET",
                                url: "shipdata.php",
                                processData: true,
                                data: {shipid:Math.round((Math.random()*2+2))},
                                dataType: "json",
                                success: function(json) {
                                    var enemy = new ship(json);
                                    game.enemies.push(enemy);
                                },
                                error: function(x,y,z) {
                                // x.responseText should have what's wrong
                                    alert(x.responseTest);
                                }
                            });
                        }
                    game.initialized = true;
                },
                error: function(x,y,z) {
                // x.responseText should have what's wrong
                    alert(x.responseTest);
                }
            });


        })

..............................

var ship = (function(json){
        var self = this;
        jobj = jQuery.parseJSON(json.responseText);
        self.height = jobj.height;
        self.width = jobj.width;
        self.xinit = jobj.xinit;
        self.yinit = jobj.yinit;
        self.speed = jobj.speed;
        self.weapons = jobj.weapons;
        self.maxlasers = jobj.maxlasers;
        self.imagesrc = jobj.imgurl;
        self.lasers = [];
        self.x = self.xinit;
        self.y = self.yinit;

JSON being sent in:

{"height":75,"width":50,"xinit":275,"yinit":525,"speed":3,"weapons":[1,2],"maxlasers":2,"imgurl":"images\/ship.png"}

Live Demo:

http://www.schennshome.net/medicalmmj/practice/index.html (The code is far from being perfect, Im running through it to try and catch the various errors before animating, but cant get past this.)

share|improve this question

1 Answer

up vote 1 down vote accepted

I've dug through your source code, and the problem is not actually shown in your question. The problem is with this line, which follows your Ajax call:

player_ship = $.extend(thisplayer, game.pship);

game.pship refers to the data returned by the ajax call, but since this is asynchronous, the above line will be evaluated first, which means game.pship will not be defined.

To fix this, you need to include all of the code in your init function that is currently below the ajax call directly in the success callback. This will prevent the code from being evaluated until the ajax call has returned.

The reason that it works with breakpoints is that this interrupts evaluation, which allows the ajax call to complete before game.pship is referenced.

Edit

I'm now getting an error on line 489, stating that player_ship is undefined. This is again because of the evaluation order of async code. The problem is that player_ship is being defined inside the ajax function in init now, but is being referenced in gameLoop, outside of this callback.

This is how I would rewrite gameLoop:

var callback = function() {
  game.canvas.clearCanvas();
  drawStarfield();

  if(player_ship.alive && game.initialized && !(game.loading)) {
    drawPlayer();
    drawLaser();
    drawEnemies();
  }
};

if(game.initialized==false) {
  init(callback);
} else {
  callback();
}

And then amend init to accept a callback method which is called at the bottom of your success callback. This way, if the game has not been initialized (and player_ship is not yet defined), it will be executed after the ajax call.

share|improve this answer
ahhhhhhhhhhhhhhhhh thank you!!!! – Schenn Sep 1 '11 at 16:29
I did this and I am still getting the same problem with it sending null to the ship function..? – Schenn Sep 1 '11 at 16:40
aha, its interpreting the json as non-string. Values arnt stringed. Fixing – Schenn Sep 1 '11 at 17:14
Ahh ok. Still learning about callback functions and how to use em properly. Thanks! – Schenn Sep 6 '11 at 15:35

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.