Javascript/jQuery object scope issues

Question

I am having some issues with scope in JS, which I am just picking up.

I've defined an object and am making a .getJSON() call within it, but I don't seem to be able to correctly refer to the calling object's attributes:

// Vehicle object
function vehicle(id) {
    this.id = id;
    var that = this;
    // Fetch some JSON
    $.getJSON("json.php?act=vehicleInfo&id=" + this.id, function (json) {
        that.vehicleInfo = json
        that.icon = L.AwesomeMarkers.icon({ icon: that.vehicleInfo.icon, color: that.vehicleInfo.colour });
        that.polyline = new L.Polyline([[that.vehicleInfo.latitude, that.vehicleInfo.longitude]]);
        that.marker = L.marker([that.vehicleInfo.latitude, that.vehicleInfo.longitude], {icon: that.icon});
        that.marker.bindPopup("Test point");
        that.marker.addTo(map);
        that.polyline.addTo(map);
    });
}

// Vehicle move method
vehicle.prototype.move = function(latlng){
    this.marker.setLatLng(latlng);
    this.polyline.addLatLng(latlng);
}

When I call .move(), this.marker is undefined. Where am I going wrong here?

The $.getJSON() call returns immediately, but the callback won't be invoked until the HTTP response is received by the browser. That happens asynchronously. If you call "move()" before that happens, well, it won't have happened yet :-) — Pointy
– Pointy, Commented Apr 9, 2013 at 14:18
Though I notice that even if I call .move() a few seconds later, there are issues with the polyline not rendering - I imagine they are leaflet specific though, so I will investigate... — Terry
– Terry, Commented Apr 9, 2013 at 14:21

Blazemonger · Accepted Answer · 2013-04-09 14:22:45Z

6

Unfortunately, Ajax doesn't work that way. You can't depend on the $.getJSON callback completing at any particular time or even at all. One possibility is to make the request synchronous, but this is not recommended because it locks up the browser.

The only two solutions that are possible are:

Do not depend on ajax
Make anything that depends on the result of an ajax callback depend on the callback itself.

That is any code that calls .move for a vehicle has to be done as a result of the $.getJSON call. You can make it look a bit more elegant, though:

this.jqxhr = $.getJSON(...
/* snip */
vehicle.prototype.move = function (latlng) {
    var veh = this;
    this.jqxhr.done(function () {
       veh.marker.setLatLng(latlng);
       veh.polyline.setLatLng(latlng);
    });
}

edited Apr 9, 2013 at 14:22

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Apr 9, 2013 at 14:21

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

4 Comments

Terry Over a year ago

Wow, Stackoverflow users are awesome. I'm still a bit confused... but my JSON request was to grab the initial parameters for the vehicle - the move function isn't finished yet and should do something like what you're describing when done! :-)

Explosion Pills Over a year ago

@Terry the important thing to understand is that the callback function (third argument) to $.getJSON may not run before you call .move. In fact it's highly unlikely. Not only that, but it may never run! If you really do need to load the initial values asynchronously, you can put up a "loading" popup or something and prevent any other calls until that's done

Terry Over a year ago

Thanks guys - I understand the implications of the async methods - I think. I've done away with the .move() method, as I was only using it to test. In reality, I will be using a .update() method which will also execute an ajax call to fetch the vehicle details. Is it acceptable to have my constructor call something like setInterval(function() { vehicle.update(); }, 10000); when the .getJSON method returns?

Explosion Pills Over a year ago

@Terry that will run the code in a 10 second interval. Once again, you don't know when .getJSON callback will complete. It could be more than 10 seconds, and it could be never. However for your purposes it might work. I still prefer to delay during the async loading.

Collectives™ on Stack Overflow

Javascript/jQuery object scope issues

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related