[jQuery] 非同期通信後に別のスクリプトを実行する方法

背景

既存のレガシープロダクトにて、「エンドポイントの異なる複数のXHR通信をした結果を元にスクリプトを実行したい」という要件があった。

具体的に云うと以下のような流れ。

  1. 記事データをn件取得
  2. 取得した記事データ群からカルーセルを作成

方法

var results = [];

// 1. 複数のXHR通信を行う処理
function summarize() {
  var ids = [1, 2, 3, 4, 5];
  var promises = [];

  $.each(ids, function(i, value) {
    var deferred = $.Deferred();
    promises.push(
      $.ajax({
        method: "GET",
        url: "https://jsonplaceholder.typicode.com/posts/" + value,
        success: function(data) {
          results.push(data);
        },
        complete: function() {
          deferred.resolve();
        }
      })
    );
  });

  return promises;
}

$.when.apply($, summarize())
  .then(function() {
    // 2. XHR通信後に実行したい処理
    console.log(results);
  });

既にjQueryで組まれたサイトであった為、そのままjQueryの$.Deferred(),$.whenを使用した。

参考