Jquery executes in weird order

Question

Please have a look at this code. I expect it to:

Execute the ajax that saves two values (latitude and longitude)
use these values here = var center = new google.maps.LatLng(resplat, resplon);

The problem is that the code does not execute in this order. It "jumps over" the initial Ajax and gets back to it first when the other code is run. That makes my two values useless. Can someone explain the logic behind the order the code is being executed?

 function Initialize() {
     $.ajax({
         type: "GET",
         url: 'http://ip-api.com/json',
         dataType: "json",
         success: function (resp) {
             resplat = resp.lat;
             resplon = resp.lon;
         }
     });
     // Google has tweaked their interface somewhat - this tells the api to use that new UI
     google.maps.visualRefresh = true;
     var center = new google.maps.LatLng(resplat, resplon);

     // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
     var mapOptions = {
         zoom: 15,
         center: center,
         mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
     };

Try to add `async : false` to make the ajax hold the script till a response is received. — user3154108, Jul 25 '14 at 09:14
@user3154108 [That option is deprecated.](http://stackoverflow.com/q/11448011/1420197) — Ionică Bizău, Jul 25 '14 at 09:17
that's good to know! (I personally am forced to work with 1.10 still >.> ) — user3154108, Jul 25 '14 at 09:21

score 1 · Accepted Answer · answered Jul 25 '14 at 09:13

Move the code that use resplat and resplon inside of the ajax success callback:

function Initialize() {
      $.ajax({
          type: "GET",
          url: 'http://ip-api.com/json',
          dataType: "json",
          success: function (resp) {
              var resplat = resp.lat;
              var resplon = resp.lon;

              // Google has tweaked their interface somewhat - this tells the api to use that new UI
             google.maps.visualRefresh = true;
             var center = new google.maps.LatLng(resplat, resplon);

             // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
             var mapOptions = {
                  zoom: 15,
                 center: center,
                 mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
             };
         }
      });
}

$.ajax is an async call. You have to wait until data comes (success handler). Then you can use it.

Another way is to add a .done(foo) handler:

$.ajax({...}).done(function (...) { /* do something */ });

That did it! Im gonna read up on the link you posted. Thanks a lot! — user2915962, Jul 25 '14 at 09:17

Jquery executes in weird order

1 Answers1