MW211 EXIT

devlog
jQuery/非同期「$.when()」の中でループ
2022年03月16日
以下のようなHTMLタグがあり(ま、どんなんでもいいのだが)
┌──────────────────────────────────────┐
│<div id="i1"></div>                                                         │
│<div id="i2"></div>                                                         │
│<div id="i3"></div>                                                         │
└──────────────────────────────────────┘

以下のような関数にてアニメーションをランダムに完了させる
┌──────────────────────────────────────┐
│function test(i) {                                                          │
│    let d = new $.Deferred;                                                 │
│    $('#i' + i).animate(                                                    │
│        {'display' :'block'},                                               │
│        1000 + Math.floor(Math.random() * (250 + 1)),                       │
│        'swing',                                                            │
│        function() {                                                        │
│            console.log($(this).text());                                    │
│            d.resolve();                                                    │
│        }                                                                   │
│    );                                                                      │
│    return d.promise();                                                     │
│}                                                                           │
└──────────────────────────────────────┘

んで、以下のように非同期で並列処理を行い、
全部完了したら「完了」をコンソールログに出力する
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $.when(                                                                 │
│        test(1),                                                            │
│        test(2),                                                            │
│        test(3)                                                             │
│    )                                                                       │
│    .done(function() {                                                      │
│        console.log('完了');                                                │
│    })                                                                      │
│    .fail(function() {                                                      │
│        console.log('失敗');                                                │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
みたいなのは上記でできた。

さて、「$.when()」の中にベタ書きというのはこの場合はちょっといただけない。
「$.when()」の中で、ループさせることはできないか?(できないけど)

ということで、ループを用いる方法は以下の通り。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    let ary = [];                                                           │
│    for (let i = 1; i <= 3; i++) {                                          │
│        ary.push(test(i));                                                  │
│    }                                                                       │
│    $.when.apply(null, ary)                                                 │
│    .done(function() {                                                      │
│        console.log('完了');                                                │
│    })                                                                      │
│    .fail(function() {                                                      │
│        console.log('失敗');                                                │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
一回配列にぶちこめばよい。
但し、その配列を「$.when()」の中に直接ぶちこむと
「.done()」とかが効かなくなるので「.apply()」をかますのがミソ。
分類:jQuery