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

问题描述

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>

解决方法

您必须让警报等待来自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,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>

,

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

<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>

,

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

<input type="button" value="test" onClick="test()">
<script>
    var coordinates = {
        latitude: 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>