デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

callbacks.remove( )コールバックのリストからfunctionを除外

構文

コールバックのリストからfunctionを除外返値:callbacksオブジェクト
callbacks.remove( function )ver1.7〜

機能

コールバックのリストから引数で指定したfunctuionを除外します。複数のfunctionを除外したい場合は、カンマで区切ってfunctionを設定します。

解説

コールバックのリストからfunctionを除外します

サンプル(remove/01.html)を開いてbody内に2つのp要素が追加されていることを確認してください。それぞれid属性でpink,greenと設定されています。button要素も2つあり、それぞれid属性でfire,removeと設定されています。

<button id="fire">fire</button>
<button id="remove">remove</button>
<p id="pink"></p>
<p id="green"></p>

jQueryでは、まず以下の部分を確認してください。callbacks.addメソッドを利用してコールバックのリストに「pinkFunc」と「greenFunc」を追加しています。

var myCall = $.Callbacks();
myCall.add([pinkFunc,greenFunc]);

2つのfunctionは以下の様に記述され、各p要素に「hello」と表示します。

function pinkFunc(){
	$("p#pink").append("hello");
};
function sampleFunc(){
	$("p#greenFunc").append("hello");
};

続いて以下の部分を確認してください。id属性がfireのbuttonをクリックするとcallbacks.fireメソッドを利用してコールバックに登録された「pinkFunc」と「greenFunc」を実行します。

$("button#fire").click(function(){
	myCall.fire();
});

実際にfireボタンをクリックすると、2つのp要素に「hello」と追加されます。

続いて、以下の部分を確認してください。id属性がremoveのbuttonをクリックするとcallbacks.removeメソッドによって、引数で指定した「greenFunc」がコールバックのリストから除外されます。

$("button#remove").click(function(){
	myCall.remove(greenFunc);
});

結果として、removeボタンをクリックするとgreenFuncが除外され、fireボタンをクリックしても背景色がピンクのp要素にしか「hello」が追加されなくなります。

関連項目

すべてのfunctionを除外したい場合はcallbacks.emptyメソッドを利用してください。

メモ

複数のfunctionをまとめて除外するには

本家のページには引数の説明で以下の様に記述されています。
callbacks:A function, or array of functions, that are to be removed from the callback list.

この説明から、複数のfunctionを持った配列を引数に設定できると思ったのですが、サンプルを作成したら機能しませんでした。→サンプル(remove/test01.html

$("button#remove").click(function(){
	myCall.remove( [ pinkFunc,greenFunc ] );
});

このサンプルではremoveボタンをクリックしてもfunctionが除外されず、fireボタンをクリックすると変わらず両方のp要素に「hello」と追加されます。
なので、試しに配列ではなく普通に引数を設定したら機能しました。→サンプル(remove/test01b.html

$("button#remove").click(function(){
	myCall.remove(pinkFunc,greenFunc);
});

このサンプルではremoveボタンをクリックすると「pinkFunc」と「greenFunc」が除外され、fireボタンをクリックしても両方のp要素に「hello」と追加されなくなります。

callbacks.addメソッドでは配列で指定しても、しなくても複数登録することができましたがcallbacks.removeメソッドは違うようです。というか私の英文の解釈が違うのでしょうか?「array of functions」ってどういうものなのですか?