MW211 EXIT

devlog
jQuery/非同期のループ
2014年04月02日
以下のような感じで、配列ごとに非同期でAjaxでデータを取得して処理をするとする。
┌──────────────────────────────────────┐
│for (var index in 配列) {                                                   │
│    $.getJSON(                                                              │
│        配列[index]['url'],                                                 │
│        function(json) {                                                    │
│            alert(配列[index]['name']);                                     │
│        }                                                                   │
│    );                                                                      │
│}                                                                           │
└──────────────────────────────────────┘
ここで、配列ごとの他の要素(「配列[index]['name']」)を、
コールバック関数で参照したい場合、上記のようにすると、
戻った頃には「index」が最後まで進んでいたりして、正しい値を取得できない。
例えば、「赤、青、黄」という三つのデータ配列だった場合、
コールバック関数中ではすべて「黄、黄、黄」となってしまう。

これを解決するには、「$.each()」を使えばよい。
┌──────────────────────────────────────┐
│$.each(配列, function(index, value) {                                       │
│    $.getJSON(                                                              │
│        value.url,                                                          │
│        function(json) {                                                    │
│            alert(value.name);                                              │
│        }                                                                   │
│    );                                                                      │
│});                                                                         │
└──────────────────────────────────────┘
PHPの「foreach (配列 as $index => $value)」のようなものだ。
#連想配列の場合「$index」の部分は「$key」の方が一般的だろう。
分類:jQuery