jQuery API の deferred . resolve( args ) は、繰延オブジェクトのdoneCallbacksを呼び出すメソッド。その際、doneCallbacksに引き渡したい値を、引数として指定できる。
deferred . then( doneCallbacks, failCallbacks ) メソッド、 deferred . then( doneCallbacks, failCallbacks[, progressCallbacks] ) メソッド、deferred . done( doneCallbacks[, doneCallbacks] ) メソッドなどにより追加したdoneCallbacksを呼び出す。
引数
- args
オプション。
doneCallbacksに引き渡す値。
戻り値
- Deferred
繰延オブジェクト。
記述例
deferredObject = jQuery . Deferred();
deferredObject
. progress( function( count ) {
jQuery( '#sample' ) . text( '進行中(' + count + ')' );
} )
. done( function( count ) {
jQuery( '#sample' ) . text( '完了(' + count + ')' );
} );
var count = 0;
jQuery( '#button' ) . click( function() {
count ++;
if( count < 3 ) {
deferredObject . notify( count );
} else {
deferredObject . resolve( count );
}
};
deferredObject
. progress( function( count ) {
jQuery( '#sample' ) . text( '進行中(' + count + ')' );
} )
. done( function( count ) {
jQuery( '#sample' ) . text( '完了(' + count + ')' );
} );
var count = 0;
jQuery( '#button' ) . click( function() {
count ++;
if( count < 3 ) {
deferredObject . notify( count );
} else {
deferredObject . resolve( count );
}
};
idが「button」のボタンをクリックすると、1度目と2度目のクリック時は、idが「sample」の要素に「進行中(1)」「進行中(2)」と表示する。3度目のクリック時は、idが「sample」の要素に「完了(3)」と表示する。
実装例(サンプル)
実装例(サンプル)の動作について
- 1回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を70%に変更する。「fadeTo」ボタンの右側に「進行中(1)」と表示する。
- 2回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を40%に変更する。「fadeTo」ボタンの右側に「進行中(2)」と表示する。
- 3回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を10%に変更する。「fadeTo」ボタンの右側に「完了(3)」と表示し、「fadeTo」ボタンを無効にしクリックできないようにする。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
deferredObject = jQuery . Deferred();
deferredObject
. progress( function( count ) {
jQuery( '#jquery-sample-textStatus' ) . text( '進行中(' + count + ')' );
} )
. done( function( count ) {
jQuery( '#jquery-sample-textStatus' ) . text( '完了(' + count + ')' );
jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
} );
var count = 0;
jQuery( '#jquery-sample-button' ) . click( function() {
count ++;
var opacity = 1 - count * 30 / 100;
jQuery( '#jquery-sample-fadeTo' ) . fadeTo( 1000, opacity );
if( count < 3 ) {
deferredObject . notify( count );
} else {
deferredObject . resolve( count );
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
deferredObject = jQuery . Deferred();
deferredObject
. progress( function( count ) {
jQuery( '#jquery-sample-textStatus' ) . text( '進行中(' + count + ')' );
} )
. done( function( count ) {
jQuery( '#jquery-sample-textStatus' ) . text( '完了(' + count + ')' );
jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
} );
var count = 0;
jQuery( '#jquery-sample-button' ) . click( function() {
count ++;
var opacity = 1 - count * 30 / 100;
jQuery( '#jquery-sample-fadeTo' ) . fadeTo( 1000, opacity );
if( count < 3 ) {
deferredObject . notify( count );
} else {
deferredObject . resolve( count );
}
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-fadeTo {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-fadeTo {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button">fadeTo</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-fadeTo"></div>
</div>
<p>
<button id="jquery-sample-button">fadeTo</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-fadeTo"></div>
</div>