関数内のアラートと関数呼び出しが異常終了しました

Question

私は、navigator.geolocation関数を使用してユーザーの経度と緯度を取得するペンを作成しています。そんなにうまくいきます。

私の問題は、私がgetWeatherInfo()関数を呼び出すときです。その関数の最初の行は別の関数getLocation()を呼び出し、その後この場合はalert - alert(location)となります。しかし、私はなぜ関数がalert(location)の前に呼び出されているので、getLocation()への関数呼び出しが行われる前に警告が発生しているのか理解できません。これは、alert(lat + " " + lon);' in the getLocation（） `関数があり、そのアラートが2番目に表示されるためです。

これで何が起こっているのかわかりません。これはおそらく結果がvar location = getLocation();に戻ってこない理由と関連しています。

HTML：：

<div id="data"> 
</div> 

<button onclick="getWeatherInfo()">Click Me</button> 

CSS：

#data { 
    width: 500px; 
    height: 200px; 
    margin: 0 auto; 
    background: purple; 
    color: white; 
    text-align: center; 
} 

Javascriptを：

ここ

Link to my pen

もコードであります

このペンでjQueryを有効にして使用することに注意してください。

Answer 1

データをつかむようだが、私はあなたが順不同で呼び出すことによって何を意味するかを見る。..右の関数内でアラートすることにより、このラインを入れてみてください..あなたはしたくないか、おそらくだ

$("#data").html(location[0] + " " + location[1]); 

コードを手配してください。そういうものを設定しなければなりません。

function getLocation(callback) { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var lat = (Math.round(position.coords.latitude)).toString(); 
     var lon = (Math.round(position.coords.longitude)).toString(); 
     //alert(lat + " " + lon); 
     var coords = [lat, lon]; 
     callback(coords); 
     //return coords; 
    }); 
    } else { 
    alert("You must allow geolocation to retrieve weather data for your area"); 
    } 
} 

function getWeatherInfo() { 
    getLocation(function(location){ 
     //alert(location); 
     $("#data").html(location[0] + " " + location[1]); 
    }); 
} 

Answer 2

navigator.geolocation.getCurrentPositionが非同期に実行されているため、getLocation()を呼び出した直後にalert(location)が呼び出され、解決を待たずに呼び出されます。受け取った場所で作業するには、Promiseまたはコールバックを使用する必要があります。

注：デバッグにはconsole.logを使用する必要があります。

編集：コールバックの例については、@ Rickの答えをご覧ください。