$.whenを使って複数の非同期処理

自分用メモ

JSONを使って簡単なデータ管理をしていた時、2つのJSON読み込んできてする処理が降りかかってきた。

最初に思いついたのは、

var array1=[];
var array2=[];

$.getJSON("data1.json",function(data){
       array1=data;
});

$.getJSON("data2.json",function(data){
       array2=data;
});

window.onload=function(){
       /*array1とarray2で処理*/
}

みたいな感じ。

でも実際これしたらdata1.jsonとdata2.json両者が同時に読み込みしてるわけではないので読み込むデータの数だけ非同期と言えども時間がかかる。

端末によってはwindow.onloadの時点で読み込みが終わってなくて失敗したりしてしまった(´Д｀)

非同期を並列的に読み込む方法はないかなとなったら

jQuery.when() | jQuery API Documentation

あったぽいぽい

$.when(
   $.getJSON("data1.json"),
   $.getJSON("data2.json")
)
.done(function(data1,data2){
   /*処理*/
})
.fail(function(){
   /*エラー処理*/
});

これで解決！

微妙につまづいたこと

いや仕様ちゃんと見なかった自分が悪いんだけど。。。

when内の読み込みデータが1個だけだとgetJSONとほぼ同じでdoneの引数は中のJSONデータ引っ張ってくる。

でも今回みたいにwhenに複数のデータ読み込みがあると引数の中身は

• 読み込んだデータをオブジェクトの配列としてまとめたもの
• 成功したかどうか？(successが返ってきたので)
• 謎の何か

の配列として返ってくる。

なので

$.each(data1,function(){
   /*処理*/
});

をすると3回しかループが回らない。

$.each(data1[0],function(){
   /*処理*/
});

これならJSONの中身分ちゃんと回ってくれる。

ちゃんとドキュメント読もうな(´_ゝ｀)