Geek Answers Handbook

How can I wait until an asynchronously created object is fully accessible before calling a callback?

I am trying to create a function that will create a new marker. I need to handle some properties of a new marker in a callback. The problem is that marker instantly created and can be used to call a callback, but some properties are not yet available.

If I wait two seconds before trying to access the properties, it works just fine - it makes me think that the object still generates itself asynchronously after creation.

 <!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);

gives the correct answer. But a callback that does not wait shows an undefined error:

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

I am using the Javascript API for Google Maps here, and using google.maps is not obvious. I want to pass the whole object to a callback, but I need to make sure that the latLng information ( marker.Xg.Oa ) exists before it is called. How can I make sure it is before calling the callback?

+6
source share
1 answer

NB: I have NOT tested this, but something like this ...

 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); }); }
+7
source

More articles:


All Articles