程序员经验分享-hwhale

在调用回调之前，如何等待异步创建的对象完全可用？

2024-03-25

我正在尝试创建一个可以创建新标记的函数。我需要能够在回调中处理新标记的一些属性。问题是marker立即创建并可用于调用回调，但某些属性尚不可用。

如果我在尝试访问属性之前等待两秒钟，它就可以正常工作 - 这使我相信该对象在创建后仍在异步生成自身。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var latLng = new google.maps.LatLng(-25.363, 131.044);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: latLng
  });

  function placeMarker(map, latLng, callback, callback2){
        var marker = new google.maps.Marker({
            position: latLng,
            map: map });

        callback(marker);
        callback2(marker);
    }

    placeMarker(map, latLng, function(marker){
        setTimeout( function(){ 
            console.log(marker.Xg.Oa)
        }, 2000);
    }, function(marker){
        console.log(marker.Xg.Oa);
    });

}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>

在这个例子中回调：

setTimeout( function(){ 
    console.log(marker.Xg.Oa)
}, 2000);

产生正确的响应。但是不等待的回调显示未定义的错误：

function(marker){
    console.log(marker.Xg.Oa);
}

我在这里使用 Google Maps Javascript API 库，并且由于显而易见的原因，不能选择乱搞 google.maps 的内容。我想将整个对象传递给回调，但我需要确保 latLng 信息（marker.Xg.Oa) 在调用它之前就存在。在调用回调之前如何确保它存在？


注意：我还没有测试过这个，但是沿着这些思路......

var map = //...
var latLng = //...

function placeMarker(map, latLng, callback){

    return new Promise(function(resolve, reject)(){

        getMarker().then(function(marker){
            //The marker is immediately available
            console.log(marker); //me {__gm: Object, ... }

            //Try to get the value we need
            console.log(marker.Xg.Oa); //Uncaught TypeError: Cannot read property 'Oa' of undefined

            //wait two seconds and try again
            setTimeout(function(){ console.log(marker.Xg.Oa) }, 2000); // L {} (this is the expected output)

            while(!marker.Xg.Oa){ //Uncaught TypeError: Cannot read property 'Oa' of undefined
                callback(marker.Xg.Oa);
            }

            resolve(true);
        });
    });

}

function getMarker()
{
    return new Promise(function(resolve, reject){
        var marker = new google.maps.Marker({
            position: latLng,
            map: map 
        });

        resolve(marker);
    });
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

googlemapsapi3

在调用回调之前，如何等待异步创建的对象完全可用？ 的相关文章

随机推荐

热门标签