Umstrukturierung meines Codes zur Vermeidung von asynchronen .getJSON AJAX Anruf

Question

Ich versuche, die Google Maps v3 API auf meiner Website zu implementieren. Ich verwende derzeit ein JS-Skript, um die Karte zu laden. Derzeit sind alle Werte für Zentrum, Zoom und einige andere Dinge in meinem Skript fest codiert. Ich möchte diese Werte aus einer PHP-Datei in JSON-Form ziehen können. In meinem aktuellen Skriptdatei, nenne ich meine Funktionen in dieser Reihenfolge:

function initJSON(){ 
    var answerjson = undefined; 
    var requestAnswer = $.getJSON('URL'); 
    requestAnswer.done(function (data) { 
    answerjson = data; 
    }); 
} 

function initMap() { 

    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: //Would like to get data from JSON, 
    center: //Would like to get data from JSON, 
    mapTypeId: 'terrain' 
    }); 

    //Code here about creating a shape outliner, not important 

    variableDefinedAbove.addListener('click', showArrays); 

} 


function showArrays(event) { 
    var vertices = this.getPath(); 
    var contentString = //Would like to get data from JSON ;   
    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 
    infoWindow.open(map); 
} 

Als ich dieses Skript aufrufen, Javascript, um das initMap() und showArrays() -Funktionen vor initJSON vervollständigt die Daten ziehen können. Ich verstehe, wie man Daten aus dem abgeschlossenen initJSON() in meine anderen Funktionen einfügt, aber "answerjson" ist undefiniert, wenn diese Funktionen ausgeführt werden, was sie nutzlos macht. Gibt es eine Möglichkeit, mein Programm so umzustrukturieren, dass initJSON() abgeschlossen werden muss, bevor irgendwelche anderen Funktionen ausgeführt werden? Ich weiß, dass ich das wahrscheinlich mit Async und Promises machen könnte, aber ich habe keine Erfahrung mit ihnen, und ich würde sie lieber verwenden, wenn es eine einfachere Lösung gibt.

Answer 1

Die einfache Antwort ist Ihre Funktionen aus den .done Ihren getJSON Anruf zu nennen - etwa so:

function initJSON(){ 
    //var answerjson = undefined; dont do this, you can pass this to where you need it 
    var requestAnswer = $.getJSON('URL'); 
    requestAnswer.done(function (data) { 
     //answerjson = data; 
     //call your function here 
     initMap(data); //pass data to map function 
    }); 
} 

und aktualisieren Sie Ihre initMap Funktion Ihre Daten vom Server zu nehmen:

function initMap(data) { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: data.someProperty,//replace with actual prop name 
     center: data.someOtherProperty, //replace with actual prop name 
     mapTypeId: 'terrain' 
    }); 

    //Code here about creating a shape outliner, not important 

    variableDefinedAbove.addListener('click', showArrays); 
}