背景
jQuery Javascript , jQuery

jqueryで複数非同期終了後に何かを実行したいとき

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

タイトル通り、複数非同期をする時に、すべてが終了後に何かをしたい時の説明をします。
といっても、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を一括で渡すところです。

以上になります。
≪ Composerのautoloaderの最適化の仕様について  |  RustのGraphQLサーバライブラリJuniperを試す ≫

Web制作のお問い合わせ

075-744-6842

(平日/土曜 10:00~17:00)

 お問い合わせ