callbacks . fireWith( context[, args] )

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

jQuery API の callbacks.fireWith( context[, args] ) は、コールバックオブジェクトのコールバック関数群を呼び出すメソッド。呼び出す際、コンテキストを第１引数に、コールバック関数に渡したい値を格納した配列を第２引数に指定し、コールバック関数群に引き渡せる。

このメソッドの引数に指定するコンテキストは、コールバック関数内において、「this」キーワードで参照する要素のこと。

記述方法（構文）

callbacks . fireWith( コンテキスト[, 実引数群] )

コールバック関数に渡したい値がある場合は、callbacks . fire( arguments )のようなカンマ区切りではなく、配列に格納して渡さなければならない。

引数

context / コンテキスト

コールバック関数内において、「this」キーワードで参照させたい要素を指定する。

args / 実引数群

コールバック関数に渡したい値を格納した配列を指定する。

オプション。省略できる。詳しくは「callbacks . fireWith( context )」のページにて。

戻り値

Callbacks Object

コールバックオブジェクト。

記述例

実引数が１つ

var callbacksObject = jQuery . Callbacks();
callbacksObject.add( function( 仮引数 ) {
    // コールバック関数内の処理文。
    // コールバック関数内の「this」キーワードは、コンテキストに指定した要素を参照する。
} );
callbacksObject.fireWith( コンテキスト, [ 実引数 ] );

実引数が１つでも配列に格納。

実引数が複数

var callbacksObject = jQuery . Callbacks();
callbacksObject.add( function( 仮引数１, 仮引数２, 仮引数３ ) {
    // コールバック関数内の処理文。
    // コールバック関数内の「this」キーワードは、コンテキストに指定した要素を参照する。
} );
callbacksObject.fireWith( コンテキスト, [ 実引数１, 実引数２, 実引数３ ] );

実装例（サンプル）

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

  • 「朝の挨拶」ボタンをクリックすると、ボタンの右横に「こんにちは。いい天気ですね。」と表示する。
  • 「朝の挨拶」ボタンを再度クリックすると、ボタンの右横のテキストを消す。
  • 「夜の挨拶」ボタンをクリックすると、ボタンの右横に「こんばんは。星が綺麗ですね。」と表示する。
  • 「夜の挨拶」ボタンを再度クリックすると、ボタンの右横のテキストを消す。

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    var $callbacksObject = jQuery.Callbacks();
    $callbacksObject.add( function( $arg1, $arg2 ) {
        jQuery( this ).text( $arg1 + $arg2 );
    } );
    var $countA = 1;
    jQuery( "#sampleButtonA" ).on( "click", function() {
        if( $countA == 1 ){
            $callbacksObject.fireWith( jQuery( '#sampleOutputA' ), [ 'こんにちは。', 'いい天気ですね。' ] );
            $countA = 2;
        }else{
            $callbacksObject.fireWith( jQuery( '#sampleOutputA' ), [ '', '' ] );
            $countA = 1;
        }
    } );
    var $countB = 1;
    jQuery( "#sampleButtonB" ).on( "click", function() {
        if( $countB == 1 ){
            $callbacksObject.fireWith( jQuery( '#sampleOutputB' ), [ 'こんばんは。', '星が綺麗ですね。' ] );
            $countB = 2;
        }else{
            $callbacksObject.fireWith( jQuery( '#sampleOutputB' ), [ '', '' ] );
            $countB = 1;
        }
    } );
} );
// -->
</script>

HTML

<p>
    <button id="sampleButtonA">朝の挨拶</button>
    <span id="sampleOutputA"></span>
</p>
<p>
    <button id="sampleButtonB">夜の挨拶</button>
    <span id="sampleOutputB"></span>
</p>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, コールバックオブジェクト タグ: パーマリンク