作为参数传递的函数的异步执行

Question

I'm facing the following problem. I want to use Google's geocoding service to draw some markers on the map. However, the marker is instantiated before geocoding even finished it's job. drawMarker function will return a Marker with location undefined.

I tried passing the geocoding function as an argument to drawMarker function, and executing it there. I thought that this way I'd achieve synchronous behaviour, which is not the case. Simplified code follows:

drawMarker(i, map, codeAddress, locationsToConvert[i]);

function drawMarker(i, map, func, arg) {
    var location = func.apply(this, [arg]);
    return new google.maps.Marker({
        position: {lat: location.lat, lng: location.lng},
        map: map,
        html: locations[i][0],
        id: i
    });
}

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            return results[0].geometry.location
        }
    });
}

What are my solutions, which one's best, perhaps:

• using the Promise interface?
• doing everything in one function and instantiating Marker in the callback of the geocode service?
• other?

Answer 1

You could try getting the address first and calling drawMarker from the callback once you have it. Edited drawMarker to something close to how it would look, I do not have full code so might not be 100% correct.

codeAddress(locationsToConvert[i]);

function drawMarker(i, map, location) {
    return new google.maps.Marker({
        position: {lat: location.lat, lng: location.lng},
        map: map,
        html: locations[i][0],
        id: i
    });
}

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            drawMarker(i, map, results[0].geometry.location);
        }
    });
}

Answer 2

You have to put the drawMarker inside the geocoder callback

function codeAddress(address) {
    geocoder.geocode({ 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            drawMarker(map,results[0].geometry.location);
        }
    });
}

take a look at this -> fiddle for the example

Answer 3

Why not convert the location then call the draw function once it returns?

Something similar to the below example (will change depending on the promise lib you are using) -- also can't promise there aren't any syntax errors in the example.

function geocodeAsync(addressToConvert) {
    return new Promise((resolve, reject) => {
      geocoder.geocode( {'address': addressToConvert }, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            resolve(results[0].geometry.location);
        }
        else {
            reject(status);
        }
      });
    });
}
let loc = locationsToConvert[i];
var promise = geocodeAsync(loc)
promise.then(result => {
  let marker = new google.maps.Marker({
        position: {lat: result.lat, lng: result.lng},
        map: map,
        html: loc[0],
        id: i
    });
  // add marker to google maps
})
.catch(err => console.error(err));