deferred . notifyWith( context[, args] )

jQuery API の deferred . notifyWith( context[, args] ) は、繰延オブジェクトのprogressCallbacksを呼び出すメソッド。その際、コンテキスト「context」や、引数の配列「args」を、progressCallbacksに引き渡すことができる。

引数

context

progressCallbacksに引き渡すコンテキスト。

progressCallbacks関数内で、コンテキストに指定したオブジェクトに、「this」でアクセスできる。

args

オプション。

progressCallbacksに引き渡す引数の配列。

戻り値

Deferred

繰延オブジェクト。

記述例

var deferredObject = new jQuery . Deferred();
emozi = {
    notify: 'ε=ヽ(* ̄∇ ̄)ノ'
}
deferredObject . notifyWith( emozi, [ 'notifyWith:', '進行中' ] );
deferredObject . progress( function( arg1, arg2 ) {
    jQuery( '#sample' ) . text( arg1 + ' ' + arg2 + ' ' + this . notify );
} );

idが「sample」の要素に「notifyWith: 進行中 ε=ヽ(* ̄∇ ̄)ノ」と表示する。

実装例(サンプル)

実装例(サンプル)の動作について

  • セレクトボックスで「解決例」を選択した場合:

    • 「実行」ボタンをクリックすると、オレンジ色のボックス要素の不透明度を25%に変更する、5秒間のアニメーションを、実行する。

    • アニメーション中、「実行」ボタンの右横に、「notifyWith: 進行中 ε=ヽ(* ̄∇ ̄)ノ 」と表示し、「ε=ヽ(* ̄∇ ̄)ノ」の左横に、0.5秒ごとに「ε=」を追加していく。5秒経過すると、「resolveWith: 成功 o(^∇^)oワーイ♪」というテキストに変更する。

    • 「実行」ボタンのテキストを「戻す」というテキストに変更する。

    • 「戻す」ボタンを、クリックすると、元に戻す。

  • セレクトボックスで「リジェクト(拒否)例」を選択した場合:

    • 「実行」ボタンをクリックすると、「実行」ボタンの右横に、「notifyWith: 進行中 ε=ヽ(* ̄∇ ̄)ノ 」と表示し、その左横に、0.5秒ごとに「ε=」を追加していく。2秒経過すると、「rejectWith: 失敗 (_ _|||) 」というテキストに変更する。

    • 「実行」ボタンのテキストを「戻す」というテキストに変更する。

    • 「戻す」ボタンを、クリックすると、元に戻す。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            var deferredObject = new jQuery . Deferred();
            emozi = {
                resolve: 'o(^∇^)oワーイ♪',
                reject: '(_ _|||)',
                notifyA: '<span>ε=ヽ(* ̄∇ ̄)ノ</span>',
                notifyB: 'ε='
            }
            jQuery( this ) . prop( 'disabled', true );
            jQuery( '#jquery-sample select' ) . prop( 'disabled', true );
            var select = jQuery( '#jquery-sample select' ) . val();
            if( select == 'resolved' ) {
                jQuery( '#jquery-sample-animation' ) . fadeTo( 5000, 0.25 );
                setTimeout( function() {
                    deferredObject . resolveWith( emozi, [ 'resolveWith:', '成功' ] );
                    jQuery( '#jquery-sample-button' ) . text( '戻す' );
                    jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
                }, 5000 );
            } else {
                setTimeout( function() {
                    deferredObject . rejectWith( emozi, [ 'rejectWith:', '失敗' ] );
                    jQuery( '#jquery-sample-button' ) . text( '戻す' );
                    jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
                }, 2000 );
            }
            setTimeout( function() {
                deferredObject . notifyWith( emozi, [ 'notifyWith:', '進行中' ] );
                if ( deferredObject . state() === "pending" ) {
                    setTimeout( function progress() {
                        deferredObject . notifyWith( emozi );
                        setTimeout( progress, 500 );
                    }, 500 );
                }
            }, 1 );
            deferredObject
                . then(
                    function( arg1, arg2 ) {
                        jQuery( '#jquery-sample-message' ) . text( arg1 + ' ' + arg2 + ' ' + this . resolve );
                    },
                    function( arg1, arg2 ) {
                        jQuery( '#jquery-sample-message' ) . text( arg1 + ' ' + arg2 + ' ' + this . reject );
                    },
                    function( arg1, arg2 ) {
                        if( arg1 ) {
                            jQuery( '#jquery-sample-message' ) . prepend( arg1 + ' ' + arg2 + ' ' + this . notifyA );
                        } else {
                            jQuery( '#jquery-sample-message span' ) . prepend( this . notifyB );
                        }
                    }
                );
        },
        function() {
            jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            jQuery( '#jquery-sample select' ) . prop( 'disabled', false );
            jQuery( '#jquery-sample-message' ) . text( '' );
            jQuery( '#jquery-sample-animation' ) . fadeTo( 500, 1 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . text( '実行' );
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            }, 500 );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    margin: 10px;
}
#jquery-sample select {
    margin: 0px 10px 0px 0px;
}
#jquery-sample-message {
    margin: 0px 0px 0px 10px;
}
#jquery-sample-animation {
    margin: 10px;
    padding: 10px;
    height: 100px;
    background-color: orange;
    border: 1px solid gray;
    border-radius: 10px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <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-message"></span>
    </p>
    <div id="jquery-sample-animation"></div>
</div>

スポンサード リンク

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