promise( [type] [, target] )

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

jQuery API の promise( [type] [, target] ) は、Promiseオブジェクトを返すメソッド。特定の要素からPromiseオブジェクトを得たいときなどに便利だ。

引数

type

キューのタイプ。

デフォルトのキューは、「fx」。

target

オブジェクト。

戻り値

Promise

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

記述方法

jQuery( セレクター ) . promise();

「セレクター」にマッチした要素から、Promiseオブジェクトを取得。

記述例

jQuery( '#sample' ) . promise();

idが「sample」の要素から、Promiseオブジェクトを取得。

実装例（サンプル）

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

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

  • 5秒経過すると、「実行」ボタンの右横に、「完了」というテキストを追加する。

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

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

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( this ) . prop( 'disabled', true );
            jQuery( '#jquery-sample-animation' ) . fadeTo( 5000, 0.25 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . text( '戻す' );
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            }, 5000 );
            jQuery( '#jquery-sample-animation' )
                . promise()
                . done(
                    function() {
                        jQuery( '#jquery-sample-message' ) . append( '完了' );
                    }
                );
        },
        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-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>
        <button id="jquery-sample-button">実行</button>
        <span id="jquery-sample-message"></span>
    </p>
    <div id="jquery-sample-animation"></div>
</div>

スポンサード リンク

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