jQuery Ajax / getJSON Javascript问题

Question

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

Answer 1

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.