jQuery.when()【状態判定】

メモ

  • 指定オブジェクトの状態を判定し、状態が設定された Promise オブジェクトを返却
    指定オブジェクトにより下記の処理
    • 無し：成功状態の Promise オブジェクトを返却 ( 例１ 参照)
    • Deferred オブジェクトのみ：そのサブセットの Promise オブジェクトを返却 ( 例１ 参照)
    • Deferred オブジェクト・Promise オブジェクト 以外のみ：成功状態の Promise オブジェクトを返却 ( 例１ 参照)
    • 複数の Deferred オブジェクト：Deferred オブジェクトを新規生成 (マスター) しそのサブセットの Promise オブジェクトを返却、状態は下記  ( 例２ 参照)
      全て成功状態：成功状態
      １つでも失敗状態：失敗状態
  • 返却された Promise オブジェクトのハンドラのパラメータ ( 例２ 参照)
    • 成功処理ハンドラ：$when() の指定オブジェクト順
      個々のパラメータは１つに集約 (パラメータ無し：undefined / １個のパラメータ：そのまま / 複数パラメータ：配列変換)
    • 失敗処理ハンドラ：失敗状態のオブジェクトのパラメータ
  • 下記の組み合わせで、次の様な記述が可能 ( 例３ 参照) 
    $.when( ～ )
 .then( ～ )
   ...
 .then( ～ )
 .catch( ～ );
  • 非同期処理の並行実行については、状態管理・非同期処理 (Deferred Object) 参照

構文

説明構文戻り値
状態判定 jQuery.when( [ deferred1 [, ... deferredN ] ] ) 1.5
Deferred  | Promise  | Thenable deferred1 ～ deferredN：実行オブジェクト
Promise

関連

例

【例１】
<p id="output1" style="border:1px black solid; padding:1px 5px;">【出力】</p>

<script>
var doneCallback1 = function() { $("#output1").append("<br>done1"); };
var failCallback1 = function() { $("#output1").append("<br>fail1"); };
// パラメータ無し
$.when().then(doneCallback1, failCallback1);

var doneCallback2 = function(p1) { $("#output1").append("<br>done2 " + p1); };
var failCallback2 = function(p1) { $("#output1").append("<br>fail2 " + p1); };
// 即時成功状態
$.when(123).then(doneCallback2, failCallback2);
// 成功状態
var df1 = $.Deferred();
$.when(df1).then(doneCallback2, failCallback2);
df1.resolve("resolve");
// 失敗状態
var df2 = $.Deferred();
$.when(df2).then(doneCallback2, failCallback2);
df2.reject("reject");
</script>

【出力】

【例２】
<p id="output2" style="border:1px black solid; padding:1px 5px;">【出力】</p>

<script>
var doneCallback = function(p1, p2, p3) {
  $("#output2").append("<br>done3 (" + p1 + ") / (" + p2 + ") / ("  + p3 + ")");
};
var failCallback = function(p1, p2, p3) {
  $("#output2").append("<br>fail3 (" + p1 + ") / (" + p2 + ") / ("  + p3 + ")");
};
// 成功状態 (パラメータ有り)
var dfA = $.Deferred();
var dfB = $.Deferred();
var dfC = $.Deferred();
$.when(dfA, dfB, dfC).then(doneCallback, failCallback);
dfA.resolve(1, 2, 3);
dfB.resolve("resolve");
dfC.resolve( );
// 失敗状態 (パラメータ有り)
var dfX = $.Deferred();
var dfY = $.Deferred();
var dfZ = $.Deferred();
$.when(dfX, dfY, dfZ).then(doneCallback, failCallback);
dfX.resolve(1, 2, 3);
dfY.reject(4, 5, 6);
</script>

【出力】

【例３】
<p id="output3" style="border:1px black solid; padding:1px 5px;">【出力】</p>

<script>
var doneCallback1 = function() { $("#output3").append("<br>done (1)"); };
var doneCallback2 = function() { $("#output3").append("<br>done (2)"); };
var doneCallback3 = function() { $("#output3").append("<br>done (3)"); };
var failCallback = function() { $("#output3").append("<br><br>fail"); };
// 成功状態 (メソッドチェーン)
var dfA = $.Deferred();
var dfB = $.Deferred();
var dfC = $.Deferred();
$.when(dfA, dfB, dfC)
 .then(doneCallback1)
 .then(doneCallback2)
 .then(doneCallback3)
 .catch(failCallback);
dfA.resolve();
dfB.resolve();
dfC.resolve();
// 失敗状態 (メソッドチェーン)
var dfX = $.Deferred();
var dfY = $.Deferred();
var dfZ = $.Deferred();
$.when(dfX, dfY, dfZ)
 .then(doneCallback1)
 .then(doneCallback2)
 .then(doneCallback3)
 .catch(failCallback);
dfY.reject();
</script>

【出力】