ajaxで読み込んだ値をグローバル変数にセットして使う方法

ajaxで取得したデータをグローバル変数にセットして、その値を使おうとすると設定したはずの値が得られないということがあります。

下のプログラムを例にすると、glovalFunc関数からglovalFunc2関数を呼び出して$.getJSONで取得したデータをグローバル変数（glovalData）に代入しています。

次にglovalFunc関数では、グローバル変数に代入された値をコンソールで表示すると値が未定義（undefined）のままになっています。さらにsetTimeoutを使い時間をおいてグローバル変数の値を表示すると設定した値が表示されます。

この原因は、ajaxの非同期通信にあるので、$ajaxSetupなどで同期通信の設定（async:false）をすることで設定した値が表示できるようになります。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var glovalData = [];
function glovalFunc2(){
	//$.ajaxSetup({async : false});
	$.getJSON('http://localhost/test.json', function(data) {
		$.each(data, function(k, v) {
			glovalData.push([k,v]);
		});
	});
}

function glovalFunc() {
        glovalFunc2();
	console.log(glovalData);
	setTimeout('console.log(glovalData)', 1000);
}
</script>

<input type="button" id="button" value="クリック" onclick="glovalFunc()" />

下のプログラムは、ローカル変数の値を返り値にしますが、これも上のプログラムと同じくglovalFunc2関数の$.getJSONの非同期通信によりglovalFunc関数に値が返される前に次の処理（console.log(data)）を実行するので値が未定義として表示されます。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function glovalFunc2(){
	var localData = [];
	//$.ajaxSetup({async : false});
	$.getJSON('http://localhost/test.json', function(data) {
		$.each(data, function(k, v) {
			localData.push([k,v]);
		});
	});
	return localData;
}

function glovalFunc() {
	var data = glovalFunc2();
	console.log(data);
}
</script>