js STUDIO

deferred.then()

Deferredオブジェクトがresolve、reject、またはまだ進行(progress)している際に、呼び出されるハンドラを追加します。

deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) 1.8追加

戻り値:Promise

引数 説明
doneFilter

型：Function()

Deferredがresolveされた際に呼び出される関数です。

failFilter

型：Function()

Deferredがrejecteされた際に呼び出される任意指定の関数です。

progressFilter

型：Function()

進行(progress)の通知をDeferredへ送信する際に呼び出される任意指定の関数です。

deferred.then( doneCallbacks, failCallbacks ) 1.5追加 1.8削除

戻り値:Promise

引数 説明
doneCallbacks

型：Function()

Deferredがresolvedした際に実行したいコールバック関数を指定します。関数の配列を指定することも可能です。

failCallbacks

型：Function()

Deferredがrejectedした際に実行したいコールバック関数を指定します。関数の配列を指定することも可能です。

deferred.then( doneCallbacks, failCallbacks [, progressCallbacks] ) 1.7追加 1.8削除

戻り値:Promise

引数 説明
doneCallbacks

型：Function()

Deferredがresolvedした際に実行したいコールバック関数を指定します。関数の配列を指定することも可能です。

failCallbacks

型：Function()

Deferredがrejectedした際に実行したいコールバック関数を指定します。関数の配列を指定することも可能です。

progressCallbacks

型：Function()

進行(progress)の通知をDeferredへ送信する際に実行したいコールバック関数を指定します。関数の配列を指定することも可能です。

jQuery 1.8より前のバージョンについて

jQuery1.8より前のバージョンでは、引数は関数または関数の配列にすることが出来ました。

そのタイプのコールバックが必要無い場合は、引数をnullにすることが出来ます。 代わりに.done()、.fail()または.progress()を、 ステータスまたは値のフィルタリング無しにコールバックの1つのタイプとして設定するのに使用します。

jQuery 1.8のバージョンについて

jQuery1.8では、deferred.then()メソッドは、現在非推奨のdeferred.pipe()に置き換わり、 関数を通じてステータスとdeferredの値をフィルター出来る新しいpromiseを返します。 doneFilterとfailFilterの関数は、元のDeferredのresolve/rejectのステータスと値をフィルターします。 progressFilter関数は、元のDeferredのnotifyまたはnotifyWithメソッドの呼び出しをフィルターします。 これらのフィルター関数は、promiseの.done()または.fail()コールバックに沿って渡される新しい値を返すことが出来ます。 またはpromiseのコールバックへresolve/rejectのステータスと値を渡す別のObservableなオブジェクト(Deferred、Promise等)を返すことも可能です。 もしフィルター関数がnull、または指定されていなければ、 promiseは元と同じ値であるとしてresolveまたはrejectされます。

コールバックについて

コールバックは追加された順に実行されます。 deferred.thenはPromiseを返すため、 追加の.then()メソッドを含めて、Promiseオブジェクトの他のメソッドにこれを繋げる事が可能です。

デモ

.getメソッドはDeferredオブジェクトから引き出されるjqXHRオブジェクトを返すため、 .thenメソッドを使用してハンドラーを割り当てることが出来ます。 

$.get( "test.php" ).then(
  function() {
    alert( "$.get 成功" );
  }, function() {
    alert( "$.get 失敗!" );
  }
);

下記は、resolve値をフィルターしている例です。 

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>deferred.then demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button>Filter Resolve</button>
<p></p>

<script>
var filterResolve = function() {
  var defer = $.Deferred(),
    filtered = defer.then(function( value ) {
      return value * 2;
    });

  defer.resolve( 5 );
  filtered.done(function( value ) {
    $( "p" ).html( "Value is ( 2*5 = ) 10: " + value );
  });
};

$( "button" ).on( "click", filterResolve );
</script>

</body>
</html>

下記は、リジェクト値をフィルターする例です。 

var defer = $.Deferred(),
  filtered = defer.then( null, function( value ) {
    return value * 3;
  });

defer.reject( 6 );
filtered.fail(function( value ) {
  alert( "Value is ( 3*6 = ) 18: " + value );
});

下記は、チェインタスクの例です。 

var request = $.ajax( url, { dataType: "json" } ),
  chained = request.then(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
  });

chained.done(function( data ) {
  // 最初のリクエストによって提供されるものとして、
  // url2からdataを取得します。
});

 Back to top

© 2010 - 2017 STUDIO KINGDOM