如何在调用回调之前等待异步创建的对象完全可用?
How can I wait for an asynchronously created object to be completely available before invoking a callback?
我试图创建一个函数,将创建一个新的标记。我需要能够处理回调中新标记的一些属性。问题是,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);
}
我在这里使用谷歌地图Javascript API库,并与谷歌混淆。由于显而易见的原因,地图功能不是一个选项。我想将整个对象传递给回调,但我需要确保在调用它之前存在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);
});
}
相关文章:
- JavaScript名称空间和对象创建
- 从不同的对象创建阵列
- Nodejs-从对象创建可读流
- Javascript对象创建实践
- 插件SDK中的动态或计算对象创建
- 为json对象创建一个动态表
- 对象.创建解释
- 从对象创建嵌套数组失败
- 从JSON对象创建具有超链接的HTML表
- 如何将文档对象创建为HTML页面
- 创建一个类,该类使用es6类语法将Function对象创建为实例
- KineticJS在对象创建(NOOB)后更改属性
- 对象创建中的JavaScript && notation
- Javascript对象创建-创建许多对象
- 从另一个JSON对象创建JSON对象
- 使用linq.js从多个对象创建JSON对象数组
- 如何使用Immutable.js从javascript原始对象创建记录映射
- 在fabric.js中初始化对象创建的子类
- Angularfire:从$FirebaseObject的子对象创建$FirebaseObject
- 为JSON对象创建CRUD