Alarm und Funktionsaufruf innerhalb der Funktion außerhalb der Reihenfolge

Question

Ich mache einen Stift, der die navigator.geolocation-Funktion verwendet, um den Längen- und Breitengrad des Benutzers zu erhalten. So viel funktioniert gut.

Mein Problem ist, wenn ich die getWeatherInfo() Funktion aufrufen. Sie werden sehen, dass die erste Zeile in dieser Funktion eine andere Funktion getLocation() aufruft, dann wird in diesem Fall eine alert - alert(location) ausgelöst. Allerdings verstehe ich nicht, warum diese Warnung ausgelöst wird, bevor der Funktionsaufruf an getLocation() stattfindet, da var location = getLocation(); Funktion vor alert(location) aufgerufen wird? Ich glaube, das ist der Fall, da es eine alert(lat + " " + lon);' in the getLocation() `-Funktion gibt und diese Warnung an zweiter Stelle steht.

Also, nicht sicher, was dort los ist. Das hängt wahrscheinlich damit zusammen, warum ich kein Ergebnis in var location = getLocation(); zurückbekomme, das sich als undefiniert zeigt ???

Link to my pen

Hier ist der Code auch:

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:

function getLocation() { 
    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); 
     return [lat, lon]; 
    }); 
    } else { 
    alert("You must allow geolocation to retrieve weather data for your area"); 
    } 
} 

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

Beachten Sie, dass jQuery in diesem Stift aktiviert und verwendet wird.

Answer 1

Es scheint, die Daten zu packen, aber ich sehe, was Sie durch den Aufruf aus, um meine .. Versuchen Sie, diese Zeile direkt Ihre Warnung innerhalb der Funktion setzen ..

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

Das ist nicht wahrscheinlich ist, wie Sie wollen ordnen Sie Sie Code, aber es ist .. Sie müssen es so etwas einrichten:

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

Es ist, weil navigator.geolocation.getCurrentPosition asynchron ausgeführt wird, damit die alert(location) aufgerufen wird unmittelbar nach getLocation() Aufrufen und nicht warten, um es zu lösen. Sie müssen ein Versprechen oder einen Rückruf verwenden, um mit Ihrem empfangenen Standort zu arbeiten.

Hinweis: Sie sollten console.log zum Debuggen verwenden.

Bearbeiten: @ Ricks Antwort für ein Rückrufbeispiel betrachten.