読者です 読者をやめる 読者になる 読者になる

ぱちおのいろいろ。

プログラミング、イラスト、作曲、アニメ等好きな事や近況報告とかアウトプットしたい時に使います。

$.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の中身分ちゃんと回ってくれる。

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