Асинхронное выполнение функции, переданной как аргумент

Question

У меня возникла следующая проблема. Я хочу использовать службу геокодирования Google, чтобы нарисовать некоторые маркеры на карте. Тем не менее, маркер создается до того, как геокодирование даже закончило работу. drawMarker функция вернет Marker с location undefined.

Я попытался передать функцию геокодирования в качестве аргумента функции drawMarker и выполнить ее там. Я думал, что таким образом я бы достиг синхронного поведения, чего не было. Упрощенный код следующим образом:

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

Каковы мои решения, которые один лучших, возможно:

• используя интерфейс Promise?
• Выполнение всего в одной функции и создание экземпляра Marker в обратном вызове службы геокодирования?
• прочее?

Answer 1

Вы можете попытаться получить адрес первым и позвонить drawMarker после обратного вызова после его получения. Отредактировано drawMarker что-то близко к тому, как он будет выглядеть, у меня нет полного кода, поэтому он может быть не на 100% правильным.

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

Почему бы не преобразовать location затем вызвать функцию отрисовки, когда он возвращается?

Нечто похожее на приведенный ниже пример (изменится в зависимости от используемого вами обещания lib) - также не может обещать, что в этом примере нет синтаксических ошибок.

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

Answer 3

Вы должны поставить drawMarker внутри геокодера обратного вызова

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

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

посмотрите на это ->fiddle для примера