CODEWITHSUNDEEP
javascriptjquery
pisarzp
pisarzp

Reputation: 677

javascript and jquery order of execution

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?

Upvotes: 0

Views: 100

Answers (3)

jvverde
jvverde

Reputation: 631

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

Upvotes: 0

Andrey M.
Andrey M.

Reputation: 3806

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

Upvotes: 0

Barmar
Barmar

Reputation: 782508

The precise order of execution is:

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

Remember, the first A in AJAX stands for asynchronous.

Upvotes: 1

Related Questions