非同期を避けるためにコードを再構築する.getJSON AJAXコール

Question

私のウェブサイトにGoogle Maps v3 APIを実装しようとしています。私は現在、マップを読み込むためにJSスクリプトを使用しています。現在、センター、ズームなどの値はすべてスクリプトにハードコードされています。これらの値をJSON形式のPHPファイルから取得できるようにしたいと考えています。私の現在のスクリプトファイルでは、私はこの順序で私の関数を呼び出す：私はこのスクリプトを呼び出すとき

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

は、Javascriptがデータを引き出すことができるinitJSON前initMap（）とSHOWARRAYS（）関数を完了します。私は完了したinitJSON（）からのデータを他の関数に入れる方法を理解していますが、これらの関数が実行されるときには 'answerjson'は未定義です。他の関数を実行する前にinitJSON（）を完了させるために私のプログラムを再構成する方法はありますか？私はおそらく非同期と約束でこれを行うことができると知っていますが、私はそれらの経験はありません。

Answer 1

簡単な答えはあなたのgetJSONコールの.doneからあなたの関数を呼び出すことである - ので、同じよう：

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

、サーバーからデータを取るためにあなたのinitMap機能を更新：

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