javascript and jquery order of execution

Question

I'm trying to write some code using Javascript/ jQuery/ Google Maps API.

However, the order of execution in my script is a bit weird.

var flats=[];
function initialize() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(50.062, 19.937),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

  /* Puling flats data using my API */
  $.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat);
  function parseFlats(data){
    /* I put flats data in format usable by Google maps API */
    $.each(data, function(i, item){
      flat = [];
      flat.push('flat_name');
      flat.push(parseFloat(item.latitude));
      flat.push(parseFloat(item.longitude));
      // z-index to display flats on map
      flat.push(i+1);
      flats.push(flat);
    });
    console.log("I'm inside the function");
  }
  console.log("activating markers");
  setMarkers(map, flats);
}

I thought that jQuery API call will be executed before setMarkers function, but when I look into firebug, the order is different:

activating markers
I'm inside the function

What am I doing wrong? How can I make sure jQuery part is executed before setMarkers function?

If you want a defined order, just put setMarkers() at the end of your callback function. — ComFreek
– ComFreek, Commented Aug 25, 2013 at 17:41

Barmar · Accepted Answer · 2013-08-25 17:48:16Z

1

The precise order of execution is:

Assign variable mapOptions
Assign variable map
Call $.getJSON, which sends an AJAX request and registers the function to be called when the reply is received.
Log activating markers
Call setMarkers().
Return from the initialize() function to the browser's event loop.
When the AJAX response is received, call parseFlats(), which logs I'm inside the function.

Remember, the first A in AJAX stands for asynchronous.

answered Aug 25, 2013 at 17:48

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

jvverde · Accepted Answer · 2013-08-25 18:05:17Z

Your problem is the asynchronous nature of $.getJSON. If you need to call setMarkers(map, flats) only after parseFlats, call it inside parseFlats

$.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat);
function parseFlats(data){
  /* I put flats data in format usable by Google maps API */
  $.each(data, function(i, item){
    flat = [];
    flat.push('flat_name');
    flat.push(parseFloat(item.latitude));
    flat.push(parseFloat(item.longitude));
    // z-index to display flats on map
    flat.push(i+1);
    flats.push(flat);
  });
  console.log("I'm inside the function");
  console.log("activating markers");
  setMarkers(map, flats);      
}

The other possibility is to use $.ajax with asyn property set to false (but I won't recommend it, as the browser blocks until the server answer is received)

$.ajax({
  dataType: "json",
  url: 'http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062',
  success: parseFlat,
  async:false
});

Andrey M. · Accepted Answer · 2013-08-25 17:53:34Z

0

Move setMarkers inside at the of parseFlats and you get the order you want.

answered Aug 25, 2013 at 17:53

Andrey M.

3,8044 gold badges35 silver badges39 bronze badges

Collectives™ on Stack Overflow

javascript and jquery order of execution

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