在调用回调之前，如何等待异步创建的对象完全可用？ [英] How can I wait for an asynchronously created object to be completely available before invoking a callback?
问题描述
我试图创建一个将创建一个新标记的函数。我需要能够处理回调中新标记的一些属性。问题是立即创建 marker 并可用于调用回调，但有些属性尚未可用。
如果我在尝试访问属性之前等待两秒钟，它会正常工作 - 这让我相信该对象在创建后仍然是异步生成的。
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title>简单标记< / title>
< style>
html，body {
height：100％;
保证金：0;
padding：0;
}
#map {
height：100％;
}
< / style>
< / head>
< body>
< div id =map>< / div>
< script>
函数initMap（）{
var latLng = new google.maps.LatLng（-25.363，131.044）;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：4，
center：latLng
}）;
函数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）
$ b}，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）;
会产生正确的回应。但是不等待的回调显示了一个未定义的错误：
$ p $ function（marker）{
console.log（ marker.Xg.Oa）;
$ b我在这里使用Google Maps Javascript API库， google.maps的东西不是一个明显的原因。我想将整个对象传递给回调函数，但我需要在调用它之前确保latLng信息（ marker.Xg.Oa ）存在。我怎样才能确保它在调用回调前存在？
注意： ..
var map = // ...
var latLng = // ...
函数placeMarker（map，latLng，callback）{
返回新的Promise（函数（解析，拒绝）（）{
getMarker（）。then（function （marker）{
//标记立即可用
console.log（marker）; // me {__gm：Object，...}
//尝试获取我们需要的值
console.log（marker.Xg.Oa）; //未捕获TypeError：无法读取未定义的属性'Oa'
//等待两秒钟并重试
setTimeout（function（）{console.log（marker.Xg.Oa）}，2000）; // L {}（这是预期的输出）
while（！marker.Xg .Oa）{//未捕获TypeError：无法读取undefined
的属性'Oa'回调（marker.Xg.Oa）;
}
解析（true）;
}）;
}）;
$ b函数getMarker（）
{
返回新的Promise（函数（解析，拒绝）{
var marker = new google .maps.Marker（{
position：latLng，
map：map
}）;
resolve（marker）;
}）;
}
I'm trying to create a function that will create a new marker. I need to be able to process some of the properties of the new marker in the callback. The problem is that marker is immediately created and can be used to invoke the callback, but some properties are not yet available.
If I wait two seconds before trying to access the properties, it works just fine - this leads me to believe that the object is still asynchronously generating itself after being created.
<!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>
In this example the callback:
setTimeout( function(){
console.log(marker.Xg.Oa)
}, 2000);
yields the correct response. But the callback that doesn't wait shows an undefined error:
function(marker){
console.log(marker.Xg.Oa);
}
I'm using a the Google Maps Javascript API library here, and messing with the google.maps stuff isn't an option for obvious reasons. I want to pass the entire object to the callback but I need to ensure that the latLng information (marker.Xg.Oa) exists before invoking it. How can I ensure that it's there before invoking the callback?
NB: I have NOT tested this but something along these lines...
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);
});
}
这篇关于在调用回调之前，如何等待异步创建的对象完全可用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
