var lat; // define these just to 
var lon; // show asynchronicity
$.getJSON('https://ipinfo.io', function(location) {
  
  console.log("\n\n\n\nlocation object from ipinfo.io...");
  console.log(location)
  
  var coords = location.loc.split(',')
  lat = coords[0]
  lon = coords[1]

  console.log("\n\n\n###");
  console.log("notice that JS gets here AFTER the last line of code");
  console.log("because the AJAX took a few seconds to get back");
  console.log("lat = " + lat + "   and lon = " + lon);

  var url = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon="  + lon;

  $.getJSON(url, function( data) {
    console.log("\n\n\n%%%");
    console.log("this comes last of all because it is the second asyncronous call,");
    console.log("it couldn't start until geolocation was back and then had to wait");
    console.log("again for it's own asynchronous call.\n");
    console.log("\ndata object from fcc-weather-api.glitch.me...");
    console.log(data);
    console.log('\ndata from location...')
    console.log('lat =', lat, '   lon =', lon)
  }); // ajax fcc-weather-api.glitch.me
}); // navigator

console.log("\n\n\n***");
console.log("undefined because JS reaches this code before the navigator.geolocation call gets back");
console.log("lat = " + lat + "   and lon = " + lon);