deferred . pipe( [doneFilter][, failFilter] )

投稿日: 2012年1月5日 作成者: alphasis

jQuery API の deferred . pipe( [doneFilter][, failFilter] ) は、繰延オブジェクトを、繋げたり、フィルタリングしたりするときに、便利なメソッド。

「jQuery Version 1.8」の時点で非推奨になった。
deferred . then( doneFilter[, failFilter][, progressFilter ] ) メソッドで代替できる。

引数

doneFilter

繰延オブジェクトが、解決されたときに、呼び出す関数。

failFilter

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

戻り値

Promise

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

記述例

var effect = jQuery( '#sample-a' ) . fadeTo( 500, 0.25 );
jQuery . when( effect ) . pipe( function () {
    jQuery( '#sample-b' ) . text( '完了' );
} );

idが「sample-a」の要素の不透明度を25%に変更するアニメーションを実行する。アニメーションが終了すると、idが「sample-b」の要素に「完了」と表示する。

実装例（サンプル）


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

  • 「実行」ボタンをクリックすると、交通信号のようなアニメーションを、実行する。

    1. 青色のボックス要素を点滅。
    2. 黄色のボックス要素を約1秒間点灯。
    3. 赤色のボックス要素を点灯。

  • アニメーションが終了すると、「実行」ボタンの右横に、「完了」というテキストを追加する。

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

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

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( this ) . prop( 'disabled', true );
            var effectA = jQuery( '#jquery-sample-animation-a' )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
                . fadeTo( 500, 0.25 );
            var effectB = jQuery . when( effectA ) . pipe( function () {
                return jQuery( '#jquery-sample-animation-b' ) . fadeTo( 500, 1 ) . delay( 1000 ) . fadeTo( 500, 0.25 );
            } );
            var effectC = jQuery . when( effectB ) . pipe( function () {
                return jQuery( '#jquery-sample-animation-c' ) . fadeTo( 500, 1 );
            } );
            jQuery . when( effectC ) . pipe( function () {
                jQuery( '#jquery-sample-message' ) . append( '完了' );
                jQuery( '#jquery-sample-button' ) . text( '戻す' );
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            } );
        },
        function() {
            jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            jQuery( '#jquery-sample-message' ) . text( '' );
            jQuery( '#jquery-sample-animation-a' ) . fadeTo( 500, 1 );
            jQuery( '#jquery-sample-animation-b' ) . fadeTo( 500, 0.25 );
            jQuery( '#jquery-sample-animation-c' ) . fadeTo( 500, 0.25 );
            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-message {
    margin: 0px 0px 0px 10px;
}
#jquery-sample-animation-a,
#jquery-sample-animation-b,
#jquery-sample-animation-c {
    float: left;
    margin: 10px;
    padding: 10px;
    height: 100px;
    width: 100px;
    border: 1px solid gray;
    border-radius: 50px;
}
#jquery-sample-animation-a {
    background-color: blue;
}
#jquery-sample-animation-b {
    opacity: 0.25;
    background-color: yellow;
}
#jquery-sample-animation-c {
    opacity: 0.25;
    background-color: red;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        <button id="jquery-sample-button">実行</button>
        <span id="jquery-sample-message"></span>
    </p>
    <div id="jquery-sample-animation-a"></div>
    <div id="jquery-sample-animation-b"></div>
    <div id="jquery-sample-animation-c"></div>
    <br style="clear: left;" />
</div>

スポンサード リンク

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