卡在javascript变量闭包中

Question

I just wanted to assign position.coords.latitude and longitude to lat and lon vars but it seems that I am missing something because Console always says lat lon to be undefined.

function init() 
{
    var lat;
    var lon;

    if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(function(position)
       {
          lat = position.coords.latitude;
          lon = position.coords.longitude;     
       });
    }

    console.log(lat);
    console.log(lon);

}

Answer 1

The problem is that when you define variables with var like you do at first, their values are undefined. Now when you call the getCurrentPosition function, it's probably asynchronous, which means that console.logs are called before you actually assign them any values. Try the following change

function init() 
{
    var lat;
    var lon;

    if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(function(position)
       {
          lat = position.coords.latitude;
          lon = position.coords.longitude;  

          // Log them in the callback function
          console.log(lat);
          console.log(lon);  
       });
    }

}

Since you want to execute your actual code after you have the coords, here's how you could change your init function to accommodate asynchronous architecture.

// New function argument callbackFn - the function to call after 
// coords are loaded
function init(callbackFn) 
{
    // Removed local variables, no need for them here

    if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(function(position)
       {
          var lat = position.coords.latitude;
          var lon = position.coords.longitude;  

          // This will be logged after the async call completes, probably after 
          // the console.log call below
          console.log("finished async call");

          // Execute the callback with coords
          callbackFn(lat, lon);
       });
    }

    // This will be called as soon as JS steps over previous lines, 
    // but before the asynchronous request has completed
    console.log("finished init");
}

Let's pretend your actual program begins when you execute a function called start with latitude and longitude. In that case, you would use the following to start your program:

function start(latitude, longitude) {
    // ... SNIP ... DO SOMETHING COOL
}

init(start);

Answer 2

I would imagine that navigator.geolocation.getCurrentPosition() is asynchronous, so it wont have executed by the time you try writing to the console.

Try moving you console writes into the callback function:

function init() 
{
    if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(function(position)
       {
          var lat = position.coords.latitude;
          var lon = position.coords.longitude;   

          console.log(lat);
          console.log(lon);
       });
    }
}