deferred . then( doneFilter[, failFilter][, progressFilter ] )

投稿日: 2013年11月10日 作成者: alphasis

jQuery API の deferred . then( doneFilter[, failFilter][, progressFilter ] ) は、繰延オブジェクトが、解決されたとき、リジェクト（拒否）されたとき、進行状況の通知を生成するときに、呼び出すハンドラを、追加するメソッド。

引数

doneFilter

繰延が解決されたときに呼び出す関数。

failFilter

繰延がリジェクト（拒否）されたときに呼び出す関数。

progressFilter

繰延が進行状況の通知を生成するときに呼び出す関数。

deferred . notify( args ) または deferred . notifyWith( context[, args] ) により、繰延オブジェクトが進行状況の通知を生成するときに、progressFilterを呼び出す。

戻り値

Promise

繰延オブジェクトのメソッドのサブセット。

記述例

deferredObject = jQuery . Deferred();
deferredObject . then(
    function() {
        jQuery( '#sample' ) . text( '完了' );
    },
    function() {
        jQuery( '#sample' ) . text( '失敗' );
    },
    function( count ) {
        jQuery( '#sample' ) . text( '進行中（' + count + '）' );
    }
);
var count = 0;
jQuery( '#button' ) . click( function() {
    count ++;
    if( count < 3 ) {
        deferredObject . notify( count );
    } else {
        deferredObject . resolve();
    }
};

idが「button」のボタンをクリックすると、１度目と２度目のクリック時は、idが「sample」の要素に「進行中（1）」「進行中（2）」と表示する。３度目のクリック時は、idが「sample」の要素に「完了」と表示する。

実装例（サンプル）


実装例（サンプル）の動作について

  1. １回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を70%に変更する。「fadeTo」ボタンの右側に「進行中（1）」と表示する。
  2. ２回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を40%に変更する。「fadeTo」ボタンの右側に「進行中（2）」と表示する。
  3. ３回目の「fadeTo」ボタンクリック時は、オレンジ色のボックス要素の不透明度を10%に変更する。「fadeTo」ボタンの右側に「完了」と表示し、「fadeTo」ボタンを無効にしクリックできないようにする。
  4. 「戻す」ボタンをクリックすると元に戻す。

実装例（サンプル）のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    var count;
    jQuery( '#jquery-sample-button-reverse' ) . click( function() {
        count = 0;
        jQuery( '#jquery-sample-fadeTo' ) . fadeTo( 1000, 1 );
        jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
        jQuery( '#jquery-sample-textStatus' ) . text( '' );
        deferredObject = jQuery . Deferred();
        deferredObject . then(
            function() {
                jQuery( '#jquery-sample-textStatus' ) . text( '完了' );
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            },
            function() {
                jQuery( '#jquery-sample-textStatus' ) . text( '失敗' );
            },
            function( count ) {
                jQuery( '#jquery-sample-textStatus' ) . text( '進行中（' + count + '）' );
            }
        );
    } ) . click();
    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();
        }
    } );
} );
// -->
</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;
}
#jquery-sample p {
    margin: 10px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <div id="jquery-sample-fadeTo"></div>
    <p>
        <button id="jquery-sample-button">fadeTo</button>
        <span id="jquery-sample-textStatus"></span>
        <br />
        <button id="jquery-sample-button-reverse">戻す</button>
    </p>
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, 繰延オブジェクト タグ: パーマリンク