カリー化関数を利用して非同期処理を整理する

カリー化関数を使うと、複雑になりがちな非同期処理のコールバックを比較的シンプルに記述できます。

//非同期処理
var  GetJSON = function(fn) {
	$.ajax({
		url:'json.php',
		dataType:'json',
		success:function(json){
		  fn(json);
		}                
	});
}

//束縛
var getJson =  curry(GetJSON ,function(d){
	console.log(d)
});

//実行
getJson();

//非同期処理

var GetJSON = function(fn) {

$.ajax({

url:'json.php',

dataType:'json',

success:function(json){

fn(json);

}

});

}

//束縛

var getJson = curry(GetJSON ,function(d){

console.log(d)

});

//実行

getJson();

サンプル１

サンプル２

Google Map Apiを使っての地図作成では、

geocodeで緯度経度取得→地図移動→XHR→地図上にマーカー表示
位置情報取得→地図移動→XHR→地図上にマーカー表示

上記の処理をよく行いますが、「geocode」「位置情報取得」「XHRでのデータの取得」などは基本”非同期”の処理のためコールバックが入れ子になって複雑になりがちです。
そんなときは、curryを使って非同期処理のコールバックをまとめるとシンプルに整理できたりします。

実際にsampleを作ってみました。

位置情報を取得して周辺500m内の車椅子可のお店を表示する地図です。（位置情報が使えない場合は住所で検索してください）

sample

↓ curryを使うことで非同期処理をこんな感じに書けます。詳しい内容はリンク先のソースを参照してください。

//json取得時のコールバックを束縛
var getJson =  curry(GetJSON ,function(d){
	Markers.setMember(getLatLong(d), getContent(d));　//マーカーをセット
}) ;

//geocode 検索時のコールバックを束縛
var searchAddress = curry(SearchAddress,  function(d){
	panTo(d);                      //地図移動
	Markers.deleteAllMarkers();    //マーカーを全削除  
	getJson([d.lat(), d.lng()]) ;  //json取得
});    

//位置情報取得時のコールバックを束縛
var getCurrentPosition = curry(GetCurrentPosition, function(d){
	panTo(d);                     //地図移動
	Markers.deleteAllMarkers();   //マーカーを全削除  
	getJson([d.lat(), d.lng()]) ; //json取得
});

 //住所検索ボタン、イベント設定  
$('#search').click(function(){
	searchAddress(document.getElementById('address').value);　//geocodeで検索
});

//現在位置取得ボタン、イベント設定
$('#getCurrentPosition').click(function(){
	getCurrentPosition(); //位置情報取得
});

//json取得時のコールバックを束縛

var getJson = curry(GetJSON ,function(d){

Markers.setMember(getLatLong(d), getContent(d));　//マーカーをセット

}) ;

//geocode 検索時のコールバックを束縛

var searchAddress = curry(SearchAddress, function(d){

panTo(d); //地図移動

Markers.deleteAllMarkers(); //マーカーを全削除

getJson([d.lat(), d.lng()]) ; //json取得

});

//位置情報取得時のコールバックを束縛

var getCurrentPosition = curry(GetCurrentPosition, function(d){

panTo(d); //地図移動

Markers.deleteAllMarkers(); //マーカーを全削除

getJson([d.lat(), d.lng()]) ; //json取得

});

//住所検索ボタン、イベント設定

$('#search').click(function(){

searchAddress(document.getElementById('address').value);　//geocodeで検索

});

//現在位置取得ボタン、イベント設定

$('#getCurrentPosition').click(function(){

getCurrentPosition(); //位置情報取得

});

サンプル１

サンプル２

投稿者: shimizu