状態管理・非同期処理 (Deferred Object)

一覧

概要構文戻り値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 PromiseCore
(P：Promise 呼び出し可能メソッド)

例

<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>

【並行処理】

【順次処理】