状態管理・非同期処理 (Deferred Object)
- Deferred Object【状態管理オブジェクト】
- CommonJS Promises/A を基にデザイン
- 下記の3つの状態を管理するオブジェクト
"pending"【保留状態】 (初期状態)
"resolved"【成功状態】 (以後状態遷移無し)
"rejected"【失敗状態】 (以後状態遷移無し) - "resolved"【成功状態】への遷移:deferred.resolve()【Deferred 成功処理】 ・deferred.resolveWith()【Deferred 成功処理 (this参照指定)】
- "rejected"【失敗状態】への遷移:deferred.reject()【Deferred 失敗処理】 ・deferred.rejectWith()【Deferred 失敗処理 (this参照指定)】
- 状態遷移後にハンドラが追加された場合、即時実行
- Promise Object【非同期処理オブジェクト】
- 非同期処理で利用 (下記に対応方法等)
- Deferred Object【状態管理オブジェクト】メソッドのサブセット (状態を変更するメソッドを排除)
利用可能なメソッドは、一覧参照
- Deferred 対応の非同期処理 作成方法 ( 例 参照)
- Deferred 対応の非同期処理 の 並行処理
- jQuery.when()【状態判定】 に 並行処理 を行う処理を記述 ( 例 参照)
- Deferred 未対応の処理は、即時成功処理
- Deferred 対応の非同期処理 の 順次処理
- deferred.then()【《Deferred 成功処理・失敗処理・状態通知》ハンドラ追加】 に 順次処理を行う処理を記述し、処理順にメソッドチェーン ( 例 参照)
- deferred.catch()【《Deferred 失敗処理》ハンドラ追加】でエラー処理
- Deferred 対応の処理は、状態変更可
- Deferred 未対応の処理は、状態維持
一覧
概要 | 構文 | 戻り値 | P | 別カテゴリ |
---|---|---|---|---|
Deferredオブジェクト 生成 | $.Deferred( [beforeStart ] ) 1.5 | Deferred | ||
《Deferred 成功処理・失敗処理》共通ハンドラ追加 | deferred.always( alwaysCallbacks [, alwaysCallbacks ] ) 1.6 | Deferred | ● | |
《Deferred 失敗処理》ハンドラ追加 | deferred.catch( failFilter ) 3.0 | Promise | ● | |
《Deferred 成功処理》ハンドラ追加 | deferred.done( doneCallbacks [, doneCallbacks ] ) 1.5 | Deferred | ● | |
《Deferred 失敗処理》ハンドラ追加 | deferred.fail( failCallbacks [, failCallbacks ] ) 1.5 | Deferred | ● | |
Deferred 失敗状態 判定 | deferred.isRejected() 1.51.71.8 | Boolean | ||
Deferred 成功状態 判定 | deferred.isResolved() 1.51.71.8 | Boolean | ||
Deferred 状態通知 | deferred.notify( args ) 1.7 | Deferred | ||
Deferred 状態通知 (this参照指定) | deferred.notifyWith( context [, args ] ) 1.7 | Deferred | ||
《Deferred 成功処理・失敗処理・状態通知》 ハンドラ追加 | deferred.pipe( [doneFilter ] [, failFilter ] ) 1.61.8 deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] ) 1.71.8 | Promise | ● | |
《Deferred 状態通知》ハンドラ追加 | deferred.progress( progressCallbacks [, progressCallbacks ] ) 1.7 | Deferred | ● | |
Promiseオブジェクト 生成 (Deferred) | deferred.promise( [target ] ) 1.5 | Promise | ● | |
Deferred 失敗処理 | deferred.reject( [args ] ) 1.5 | Deferred | ||
Deferred 失敗処理 (this参照指定) | deferred.rejectWith( context [, args ] ) 1.5 | Deferred | ||
Deferred 成功処理 | deferred.resolve( [args ] ) 1.5 | Deferred | ||
Deferred 成功処理 (this参照指定) | deferred.resolveWith( context [, args ] ) 1.5 | Deferred | ||
Deferred 状態 取得 | deferred.state() 1.7 | String | ● | |
《Deferred 成功処理・失敗処理・状態通知》 ハンドラ追加 | deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) 1.8 deferred.then( doneCallbacks, failCallbacks ) 1.51.8 deferred.then( doneCallbacks, failCallbacks [, progressCallbacks ] ) 1.71.8 | Promise | ● | |
Promiseオブジェクト 生成 (jQuery) | .promise( [type ] [, target ] ) 1.6 | Promise | ||
状態判定 | $.when( deferreds ) 1.5 | Promise | Core |
例
<p id="output1" style="border:1px black solid; padding:1px 5px;">【並行処理】</p>
<p id="output2" style="border:1px black solid; padding:1px 5px;">【順次処理】</p>
<script>
function timer(sec, output) {
var df = $.Deferred();
setTimeout(function() {
var now = new Date(Date.now());
var time = "[ " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + " ] ";
$(output).append("<br>" + time + sec + " sec");
df.resolve();
}, (sec * 1000));
return df.promise();
};
function msg(str, output) {
var now = new Date(Date.now());
var time = "[ " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + " ] ";
$(output).append("<br>" + time + str);
};
// 並行処理
function msgEnd1() { return msg("End", "#output1"); }
$.when( msg("Start", "#output1"), timer(7, "#output1"), timer(5, "#output1"), timer(3, "#output1") )
.then( msgEnd1 );
// 順次処理
function timer7() { return timer(7, "#output2"); }
function timer5() { return timer(5, "#output2"); }
function timer3() { return timer(3, "#output2"); }
function msgEnd2() { return msg("End", "#output2"); }
$.when( msg("Start", "#output2") )
.then( timer7 )
.then( timer5 )
.then( timer3 )
.then( msgEnd2 );
</script>
【並行処理】
【順次処理】