京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

こんにちは。
ニシザワです。

タイトル通り、複数非同期をする時に、すべてが終了後に何かをしたい時の説明をします。
といっても、Deferredの仕組みについてはググればいっぱいでてきます。
今回は少し応用編として、複数だけど、状況によって、数が変わる時や一括で非同期処理をする場合にどうすれば、いいのかについてです。

具体的にはeachを使って作る方法ですね。
下記のHTMLから一括で非同期処理をする場合です。

   <ul id="class-list">
        <li data-class-id="1">さくら組</li>
        <li data-class-id="2">ひまわり組</li>
        <li data-class-id="3">ゆり組</li>
        <li data-class-id="4">もみじ組</li>
    </ul>
    <input type="submit" value="園児リストを取得">

次に非同期処理です。

   <script>
        $(function () {
            $('input[type=submit]').click(function (e) {

                $.when.apply($,
                    $('#class-list li').map(function () {
                        var classId = $(this).data('classId');
                        return getAjax(classId);
                    })
                ).done(function () {
                    //ここにすべてのajaxが終わったときの処理を書く
                }).fail(function(){
                    //ここにエラー時の処理を書く
                });

                function getAjax(classId) {
                    return $.ajax({
                        url: ajax.html,
                        type: 'POST',
                        data: {
                            'class_id': classId
                        },
                        dataType: 'json',
                        context : this,
                        success: function (data) {
                            //ajax成功時の処理
                        }
                    });
                }
            });
        });
    </script>

ポイントはapplyで作成したpromiseを一括で渡すところです。

以上になります。