警报在 getPosition 函数结束之前打开

Question

getPosition() 是一个让我们找到自己位置的函数，问题是警报在函数结束之前出现，第一次警报为空，然后我可以得到值

 <input type="button" value="test" onClick="test()">
 <script>
 var coordinates = {latitude: null, longitude: null, error: false}
    
      function test(){
           getPosition();
           alert(coordinates.latitude);
      }

      function getPosition() {
           navigator.geolocation.getCurrentPosition(success, fail);
           function success (pos) {
                coordinates.latitude = pos.coords.latitude;
                coordinates.longitude = pos.coords.longitude;
           }
           function fail(error){
                coordinates.error = true;
           }
      }
 </script>

Answer 1

您必须让警报等待来自navigator.geolocation.getCurrentPosition的响应。

为此，您可以使用 async/await，如下所示：

<input type="button" value="test" onClick="test()">
<script>
 var coordinates = {latitude: null, longitude: null, error: false}
    
      async function test(){
           try {
            const result = await getPosition();
            alert(coordinates.latitude);
           } catch(error) {
                alert("Error getting coordinates");
           }
           
      }

      async function getPosition() {
      return new Promise((resolve, reject) => {
                 navigator.geolocation.getCurrentPosition(success, fail);
           function success (pos) {
                coordinates.latitude = pos.coords.latitude;
                coordinates.longitude = pos.coords.longitude;
                resolve();
           }
           function fail(error){
                coordinates.error = true;
                reject(error);
           }
      });

      }
 </script>

或继续使用回调如下：

 <input type="button" value="test" onClick="test()">
 <script>
 var coordinates = {latitude: null, longitude: null, error: false}
    
      function test(){
           getPosition();
      }

      function getPosition() {
           navigator.geolocation.getCurrentPosition(success, fail);
           function success (pos) {
                coordinates.latitude = pos.coords.latitude;
                coordinates.longitude = pos.coords.longitude;
                alert(coordinates.latitude);
           }
           function fail(error){
                coordinates.error = true;
                alert("Error getting coordinates");
           }
      }
 </script>

Answer 2

您需要全局范围内的 coordinates 变量吗？如果不是，一种选择是避免在 getPosition 函数之外初始化 coordinates 变量。这样，警报将必须在用户允许获取其位置后发生。例如，您可以执行以下操作：

<input type="button" value="test" onClick="getPosition()">
<script>
      function getPosition() {
          var coordinates = {}
          navigator.geolocation.getCurrentPosition(success, fail);
          
          function success (pos) {
            coordinates.latitude = pos.coords.latitude;
            coordinates.longitude = pos.coords.longitude;
            alert(coordinates.latitude)
          }
          function fail(error){
              coordinates.error = true;
          }
      }
</script>

您可以通过根本不设置坐标变量来进一步简化此方法。

<input type="button" value="test" onClick="getPosition()">
<script>
      function getPosition() {
          navigator.geolocation.getCurrentPosition(success, fail);
          
          function success (pos) {
            alert(pos.coords.longitude)
          }
          function fail(error){
            coordinates.error = true;
          }
      }
</script>

Answer 3

这是因为 JavaScript 是一种异步语言（alert() 在 success() 函数之前触发），所以我建议使用 Promises 和 async/await 像这样：

<input type="button" value="test" onClick="test()">
<script>
    var coordinates = {
        latitude: null,
        longitude: null,
        error: false
    }

    async function test() {
        try {
            //await will make code wait until resolve() is called
            await getPosition();
            //If this runs resolve() has ben called
        } catch(e) {
            //This means reject() has ben called
            //Therefore coordinates.error in no longeer needed
        }
        alert(coordinates.latitude);
    }

    function getPosition() {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(success, reject);

            //Since you dont use any data in fail() i've replaced it with reject
            function success(pos) {
                coordinates.latitude = pos.coords.latitude;
                coordinates.longitude = pos.coords.longitude;
                resolve();
            }
        });
    }
</script>

警报在 getPosition 函数结束之前打开

the alert is open before that the getPosition function is over

javascript

position