jQuery API の deferred . state() は、繰延オブジェクトの現在の状態を表す文字列を返すメソッド。
戻り値
- String
繰延オブジェクトの現在の状態を表す文字列。
繰延オブジェクトは、次の3つの状態のいずれかになる。
- pending
解決でも、リジェクト（拒否）でもない状態。
- resolved
解決状態。
deferred.resolve() や deferred.resolveWith() などで、doneCallbacks を呼び出した状態。
- rejected
リジェクト（拒否）状態。
deferred.reject() or deferred.rejectWith() などで、failCallbacks を呼び出した状態。
記述例
var deferredState = deferredObject . state();
deferredObject の現在の状態を表す文字列を、変数 deferredState に格納。
実装例（サンプル）
繰延オブジェクトの現在の状態：
実装例（サンプル）の動作について
セレクトボックスで「解決例」を選択した場合：
「実行」ボタンをクリックすると、「jquery-sample-deferred.js」のJavaScriptファイルを読み込み、実行する。
「繰延オブジェクトの現在の状態：」の右横に、「resolved」と表示する。
「jquery-sample-deferred.js」は、オレンジ色のボックス要素の不透明度を25%に変更する、５秒間のアニメーション。
アニメーション中、「実行」ボタンの右横に、「しばらく、お待ちください。」と表示し、その２秒後には「もうしばらく、お待ちください。」というテキストに変更。さらにその３秒後には、「完了」とういうテキストに変更する。
「実行」ボタンのテキストを「戻す」というテキストに変更する。
「戻す」ボタンを、クリックすると、元に戻す。
セレクトボックスで「リジェクト（拒否）例」を選択した場合：
「実行」ボタンをクリックすると、「jquery-sample-reject.js」のJavaScriptファイルを読み込もうとするが、存在しないので、読み込みに失敗する。
「繰延オブジェクトの現在の状態：」の右横に、「rejected」と表示する。
「実行」ボタンの右横に、「しばらく、お待ちください。」と表示し、その２秒後には「失敗。」というテキストに変更する。
「実行」ボタンのテキストを「戻す」というテキストに変更する。
「戻す」ボタンを、クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( this ) . prop( 'disabled', true );
var select = jQuery( '#jquery-sample select' ) . val();
if( select == 'resolved' ) {
var deferredObject = jQuery . getScript( 'jquery-sample-deferred.js' );
} else {
var deferredObject = jQuery . getScript( 'jquery-sample-reject.js' );
}
deferredObject
. always(
function() {
jQuery( '#jquery-sample-textStatus' ) . text( 'しばらく、お待ちください。' );
jQuery( '#jquery-sample-deferred-state' ) . text( deferredObject . state() );
jQuery( '#jquery-sample select' ) . prop( 'disabled', true );
}
)
. done(
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 );
jQuery( '#jquery-sample-button' ) . text( '戻す' );
}, 5000 );
}
)
. fail(
function() {
setTimeout( function() {
jQuery( '#jquery-sample-textStatus' ) . text( '失敗。' );
}, 2000 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
jQuery( '#jquery-sample-button' ) . text( '戻す' );
}, 2000 );
}
);
},
function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
jQuery( '#jquery-sample select' ) . prop( 'disabled', false );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
jQuery( '#jquery-sample-deferred-state' ) . text( '' );
jQuery( '#jquery-sample-getScript' ) . fadeTo( 500, 1 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
jQuery( '#jquery-sample-button' ) . text( '実行' );
}, 500 );
}
);
} );
// -->
</script>
CSS
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample select {
margin: 0px 10px 0px 0px;
}
#jquery-sample-getScript {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>
<select name="deferred-state">
<option value="resolved" selected>解決例</option>
<option value="rejected">リジェクト（拒否）例</option>
</select>
<button id="jquery-sample-button">実行</button>
<span id="jquery-sample-textStatus"></span>
</p>
<p>
繰延オブジェクトの現在の状態：
<span id="jquery-sample-deferred-state"></span>
</p>
<div id="jquery-sample-getScript"></div>
</div>