jQueryで全てのAJAX呼び出しが完了したことを知る方法：シンプルな方法

2024-04-08

jQueryで全てのAJAX呼び出しが完了したことを知る方法

$.when()は、複数のDeferredオブジェクトの状態を監視し、全てが完了したタイミングで処理を実行する関数です。以下のコード例のように、$.ajax()で取得したDeferredオブジェクトを$.when()に渡すことで、全てのAJAX呼び出しが完了したタイミングでdoneハンドラが実行されます。

var ajax1 = $.ajax({
  url: '/api/data1'
});
var ajax2 = $.ajax({
  url: '/api/data2'
});

$.when(ajax1, ajax2).done(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
});

メリット:

シンプルで分かりやすい
複数のAJAX呼び出しをまとめて処理できる

エラー処理が煩雑になる
呼び出し順序を制御できない

$.ajax()のcompleteハンドラは、AJAX呼び出しが完了したタイミング regardless of success or failure で実行される関数です。以下のコード例のように、completeハンドラ内でcount変数を更新し、全てのAJAX呼び出しが完了したタイミングでif文によって処理を実行します。

var count = 0;
var total = 2;

$.ajax({
  url: '/api/data1',
  complete: function() {
    count++;
    if (count === total) {
      // 全てのAJAX呼び出しが完了
      // 処理...
    }
  }
});

$.ajax({
  url: '/api/data2',
  complete: function() {
    count++;
    if (count === total) {
      // 全てのAJAX呼び出しが完了
      // 処理...
    }
  }
});

エラー処理が容易

コードが冗長になる
複数のDeferredオブジェクトを個別に処理する必要がある

jQueryプラグインを使う

jQuery.Deferred.whenAll()などのjQueryプラグインを使う方法もあります。これらのプラグインは、複数のDeferredオブジェクトの状態を監視し、全てが完了したタイミングで処理を実行する機能を提供します。以下のコード例のように、プラグインを使って全てのAJAX呼び出しが完了したタイミングで処理を実行できます。

$.whenAll([
  $.ajax({
    url: '/api/data1'
  }),
  $.ajax({
    url: '/api/data2'
  })
]).done(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
});

プラグインの導入が必要

Promiseを使う

jQuery 3.0以降では、Promise APIを利用することもできます。 Promiseは、非同期処理の状態を管理するためのAPIです。以下のコード例のように、$.ajax()で取得したPromiseオブジェクトをPromise.all()に渡すことで、全てのAJAX呼び出しが完了したタイミングでthenハンドラが実行されます。

var promise1 = $.ajax({
  url: '/api/data1'
});
var promise2 = $.ajax({
  url: '/api/data2'
});

Promise.all([promise1, promise2]).then(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
});

モダンなコード
他のPromiseオブジェクトと組み合わせて処理できる

jQuery 3.0以降が必要

上記のように、jQueryで全てのAJAX呼び出しが完了したことを知る方法はいくつかあります。それぞれの特徴を理解し、状況に応じて最適な方法を選択してください。

$.when()を使う

var ajax1 = $.ajax({
  url: '/api/data1'
});
var ajax2 = $.ajax({
  url: '/api/data2'
});

$.when(ajax1, ajax2).done(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
  console.log('全てのAJAX呼び出しが完了しました');
});

$.ajax()のcompleteハンドラを使う

var count = 0;
var total = 2;

$.ajax({
  url: '/api/data1',
  complete: function() {
    count++;
    if (count === total) {
      // 全てのAJAX呼び出しが完了
      // 処理...
      console.log('全てのAJAX呼び出しが完了しました');
    }
  }
});

$.ajax({
  url: '/api/data2',
  complete: function() {
    count++;
    if (count === total) {
      // 全てのAJAX呼び出しが完了
      // 処理...
      console.log('全てのAJAX呼び出しが完了しました');
    }
  }
});

jQueryプラグインを使う

$.whenAll([
  $.ajax({
    url: '/api/data1'
  }),
  $.ajax({
    url: '/api/data2'
  })
]).done(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
  console.log('全てのAJAX呼び出しが完了しました');
});

Promiseを使う

var promise1 = $.ajax({
  url: '/api/data1'
});
var promise2 = $.ajax({
  url: '/api/data2'
});

Promise.all([promise1, promise2]).then(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
  console.log('全てのAJAX呼び出しが完了しました');
});

実行方法

上記サンプルコードをHTMLファイルに保存し、ブラウザで開くと、全てのAJAX呼び出しが完了したタイミングでconsole.log()によってメッセージが表示されます。

注意事項

上記サンプルコードは、あくまで基本的な例です。
実際の処理では、エラー処理なども考慮する必要があります。

jQueryで全てのAJAX呼び出しが完了したことを知る方法：その他の方法

jQuery Deferredオブジェクトのpipe()を使う

$.ajax()で取得したDeferredオブジェクトは、pipe()メソッドを使って別のDeferredオブジェクトを生成することができます。以下のコード例のように、pipe()メソッドを使って複数のDeferredオブジェクトを連結し、最後のDeferredオブジェクトのdoneハンドラが全てのAJAX呼び出しが完了したタイミングで実行されます。

var ajax1 = $.ajax({
  url: '/api/data1'
});
var ajax2 = $.ajax({
  url: '/api/data2'
});

ajax1.pipe(function() {
  return ajax2;
}).done(function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
  console.log('全てのAJAX呼び出しが完了しました');
});

処理の流れを分かりやすく記述できる

イベントハンドラを使う

$(document)に対してajaxCompleteイベントを登録することで、全てのAJAX呼び出しが完了したタイミングでイベントハンドラが実行されます。以下のコード例のように、ajaxCompleteイベントハンドラ内で処理を実行します。

$(document).on('ajaxComplete', function() {
  // 全てのAJAX呼び出しが完了
  // 処理...
  console.log('全てのAJAX呼び出しが完了しました');
});

$.ajax({
  url: '/api/data1'
});

$.ajax({
  url: '/api/data2'
});

他のAJAX呼び出しの影響を受けやすい

自作関数を使う

上記の方法が利用できない場合は、自作関数を使って全てのAJAX呼び出しが完了したことを判定する必要がある場合があります。以下のコード例は、自作関数を使って全てのAJAX呼び出しが完了したことを判定する例です。

function isAllAjaxCompleted() {
  // 現在のAJAX呼び出し数を取得
  var ajaxCount = $.active;

  // AJAX呼び出し数が0になったら完了
  return ajaxCount === 0;
}

// 1秒間隔で完了判定
setInterval(function() {
  if (isAllAjaxCompleted()) {
    // 全てのAJAX呼び出しが完了
    // 処理...
    console.log('全てのAJAX呼び出しが完了しました');
  }
}, 1000);

$.ajax({
  url: '/api/data1'
});

$.ajax({
  url: '/api/data2'
});