Javascript予期しない実行順序

Question

私はこのjquery/javascriptコードを以下に載せています。ユーザに位置の許可を求め、最後に緯度が付加されたURL文字列を出力します。

3つのconsole.log statemnetsを入れて問題を強調し、現在の出力を得ます。

1_lat = 95.555555

2_lat = 95.555555

3_https（順番に）

期待デバッグ値：//fcc-weather-api.glitch.me/api/current？ & LAT = 95.555555

実際のデバッグ値：//fcc-weather-api.glitch.me/api/current：

2_

3_https（順番に）？ &

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は非同期です。だから、あなたはあなたがこのような何かを行うことができますlatとlng

を処理する前にnavigator.geolocation.getCurrentPositionコールバック関数を待つ必要があります。

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