jQuery API の deferred . then( doneCallbacks, failCallbacks ) は、繰延オブジェクトが解決またはリジェクト（拒否）されたときに呼び出すハンドラを追加するメソッド。
「jQuery Version 1.8」で削除された。
deferred . then( doneFilter[, failFilter][, progressFilter ] ) メソッドで代替できる。
引数
- doneCallbacks
繰延が解決されたときに呼び出す関数、または関数の配列。
- failCallbacks
繰延がリジェクト（拒否）されたときに呼び出す関数、または、関数の配列。
戻り値
- Deferred
繰延オブジェクト。
記述例
function() {
jQuery( '#sample' ) . text( '成功' );
},
function() {
jQuery( '#sample' ) . text( '失敗' );
}
);
GETメソッドのHTTPリクエストで、JavaScriptファイル「sample.js」を読み込み、実行する。成功すると、idが「sample」の要素に「成功」と表示する。失敗すると、idが「sample」の要素に「失敗」と表示する。
実装例（サンプル）
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「jquery-sample-deferred.js」のJavaScriptファイルを読み込み、実行する。「jquery-sample-deferred.js」は、オレンジ色のボックス要素の不透明度を25%に変更する、５秒間のアニメーション。アニメーション中、「toggle」ボタンの右横に、「しばらく、お待ちください。」と表示し、その２秒後には「もうしばらく、お待ちください。」というテキストに変更。さらにその３秒後には、「完了」とういうテキストに変更する。
「jquery-sample-deferred.js」のJavaScriptファイルの読み込みに失敗すると、「toggle」ボタンの右横に、「しばらく、お待ちください。」と表示し、その２秒後には「失敗。」というテキストに変更する。
「toggle」ボタンを、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( this ) . prop( 'disabled', true );
jQuery
. getScript( 'jquery-sample-deferred.js' )
. always(
function() {
jQuery( '#jquery-sample-textStatus' ) . text( 'しばらく、お待ちください。' );
}
)
. then(
function() {
setTimeout( function() {
jQuery( '#jquery-sample-textStatus' ) . text( 'もうしばらく、お待ちください。' );
}, 2000 );
setTimeout( function() {
jQuery( '#jquery-sample-textStatus' ) . text( '完了。' );
}, 5000 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 5000 );
},
function() {
setTimeout( function() {
jQuery( '#jquery-sample-textStatus' ) . text( '失敗。' );
}, 2000 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 2000 );
}
);
},
function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
jQuery( '#jquery-sample-getScript' ) . fadeTo( 500, 1 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 500 );
}
);
} );
// -->
</script>
CSS
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-getScript {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-getScript"></div>
</div>