deferred . fail( failCallbacks[, failCallbacks] )

投稿日: 2011年12月26日 作成者: alphasis

jQuery API の deferred . fail( failCallbacks[, failCallbacks] ) は、繰延オブジェクトがリジェクト（拒否）されたときに呼び出すハンドラを追加するメソッド。

引数

failCallbacks

繰延がリジェクトされたときに呼び出す関数、または、関数の配列。

戻り値

Deferred

繰延オブジェクト。

記述例

jQuery . getScript( 'sample.js' ) . fail( function() {
    jQuery( '#sample' ) . text( '失敗' );
} );

GETメソッドのHTTPリクエストで、JavaScriptファイル「sample.js」を読み込み、実行する。失敗すると、idが「sample」の要素に「失敗」と表示する。

jQuery . getScript( 'sample.js' ) . fail(
    function() {
        alert( '失敗' );
    },
    function() {
        jQuery( '#sample' ) . text( '失敗' );
    }
);

GETメソッドのHTTPリクエストで、JavaScriptファイル「sample.js」を読み込み、実行する。失敗すると、アラートで「失敗」と表示する。アラートを閉じると、idが「sample」の要素に「失敗」と表示する。

実装例（サンプル）

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

「toggle」ボタンをクリックすると、「jquery-sample-deferred-fail.js」のJavaScriptファイルは存在しないので、読み込みに失敗し、「toggle」ボタンの右横に、「しばらく、お待ちください。」と表示し、その２秒後には「失敗。」というテキストに変更する。

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

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery( this ) . prop( 'disabled', true );
            jQuery
                . getScript( 'jquery-sample-deferred-fail.js' )
                . always(
                    function() {
                        jQuery( '#jquery-sample-textStatus' ) . text( 'しばらく、お待ちください。' );
                    }
                )
                . done(
                    function() {
                        setTimeout( function() {
                            jQuery( '#jquery-sample-textStatus' ) . text( 'もうしばらく、お待ちください。' );
                        }, 2000 );
                        setTimeout( function() {
                            jQuery( '#jquery-sample-textStatus' ) . text( '完了。' );
                        }, 5000 );
                        setTimeout( function() {
                            jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
                        }, 5000 );
                    }
                )
                . fail(
                    function() {
                        setTimeout( function() {
                            jQuery( '#jquery-sample-textStatus' ) . text( '失敗。' );
                        }, 2000 );
                        setTimeout( function() {
                            jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
                        }, 2000 );
                    }
                );
        },
        function() {
            jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
            jQuery( '#jquery-sample-textStatus' ) . text( '' );
            jQuery( '#jquery-sample-getScript' ) . fadeTo( 500, 1 );
            setTimeout( function() {
                jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
            }, 500 );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    margin: 10px;
}
#jquery-sample-getScript {
    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">toggle</button>
        <span id="jquery-sample-textStatus"></span>
    </p>
    <div id="jquery-sample-getScript"></div>
</div>

スポンサード リンク

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