Javascript 意外的运行顺序

Question

我下面有这个 jquery/javascript 代码。它询问用户位置权限，然后输出一个 URL 字符串，并在末尾附加纬度。

我放置了 3 个 console.log 状态网来突出显示问题，以及我得到的当前输出。

预期调试值(按顺序)

1_lat =95.555555

2_lat =95.555555

3_https://fcc-weather-api.glitch.me/api/current?&lat=95.555555

实际调试值:(按顺序)

2_

3_https://fcc-weather-api.glitch.me/api/current?&

1_lat =95.555555

var curLat ='';
var curLon ='';
var weatherAPI='';

$(document).ready(function(){

  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      curLat = "lat=" + position.coords.latitude;
      console.log("1_", curLat);
    });
  } 

  weatherAPI = getURL(curLat);
  console.log("3_", weatherAPI);
});

function getURL(lat){
  console.log("2_", lat);
  var url =  "https://fcc-weather-api.glitch.me/api/current?";
  url = url + "&" + lat;
  return url;
}

我一定不了解 javascript 如何加载以及 jQuery document.ready.function 如何影响结果。

Answer 1

navigator.geolocation 是异步的。所以你必须等待navigator.geolocation.getCurrentPosition回调函数才能处理lat和lng

你可以这样做:

var curLat ='';
var curLon ='';
var weatherAPI='';

$(document).ready(function(){

  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      curLat = "lat=" + position.coords.latitude;
      console.log("1_", curLat);
      weatherAPI = getURL(curLat);
      console.log("3_", weatherAPI);
    });
  } 
});

function getURL(lat){
  console.log("2_", lat);
  var url =  "https://fcc-weather-api.glitch.me/api/current?";
  url = url + "&" + lat;
  return url;
}

这将导致:

1_ lat=1.xxx 
2_ lat=1.xxx 
3_ https://fcc-weather-api.glitch.me/api/current?&lat=1.xxx