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

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

jQuery.callbacks( )コールバックオブジェクトの作成

構文

コールバックオブジェクトの作成返値:callbacksオブジェクト
jQo.callbacks( [オプション] )ver1.7〜

機能

コールバックオブジェクトを作成します。引数に様々なオプションが設定できます。オプションの説明は「解説」で行っています。複数のオプションを設定したい場合は、半角スペースを利用します(例:"once unique")。

解説

まずはオプション設定なし

jQuery.callbacksメソッドは引数に何も設定しないと、通常のコールバックオブジェクトを作成します。
サンプル(callbacks/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。

1行目でjQuery.callbacksメソッドを利用してコールバックオブジェクトを作成しています。2行目でcallbacks.addメソッドを利用してtestFuncをコールバックのリストに追加してます。testFuncは3〜5行目で作成され、引数で受け取った値をappendメソッドを利用してbody要素に追加します。

var myCall = $.Callbacks();
myCall.add(testFunc);
function testFunc(str){
	$("body").append(str);
};

続いて以下の部分では、buttonをクリックしたらcallbacks.fireメソッドを利用してコールバックに登録されたfunction、つまりtestFuncを実行するようにしています。

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

結果として、buttonをクリックするとbody要素内に「hello!」と追加されます。このサンプルを基準に、オプションを設定した時の違いを確認していきます。

once:一度しか実行しないようにする

オプションに「once」と設定すると、コールバックに登録したfunctionを1回しか実行しないようにできます。サンプル(callbacks/02.html)を開いて、ほとんどcallbacks/01.htmlと同じ事を確認してください。異なるのは以下の様に、jQuery.callbacksメソッドの引数に「once」が設定されている点だけです。

var myCall = $.Callbacks("once");
myCall.add(testFunc);
function testFunc(str){
	$("body").append(str);
};

結果として、buttonを何回クリックしても、testFuncが1回しか実行されないため「hello!」は1つしか追加されません。 前項で紹介したサンプルcallbacks/01.htmlではbuttonをクリックする度にtestFuncが実行され「hello!」が追加されていきます。

unique:同じfunctionを重複して追加しないようにする

オプションに「unique」と設定すると、コールバックに同じfunctionを重複して追加しないようにします。まずは「uniqueを利用していない」サンプルで確認します。サンプル(callbacks/03.html)を開いて、ほとんどcallbacks/01.htmlと同じ事を確認してください。異なるのは以下の様に、callbacks.addメソッドでtestFuncを2つ登録している点だけです。

var myCall = $.Callbacks();
myCall.add(testFunc);
myCall.add(testFunc);
function testFunc(str){
	$("body").append(str);
};

testFuncを重複して追加しているため、buttonを1回クリックすると「hello!」が「2つ」追加されることを確認してください。ではオプションに「unique」と設定したサンプルを紹介します。

サンプル(callbacks/03b.html)を開いて、ほとんどcallbacks/03.htmlと同じ事を確認してください。異なるのは以下の様に、jQuery.callbacksメソッドの引数に「unique」が設定されている点だけです。

var myCall = $.Callbacks("unique");
myCall.add(testFunc);
myCall.add(testFunc);
function testFunc(str){
	$("body").append(str);
};

このサンプルではtestFuncが重複して追加されないため、buttonを1回クリックしても「hello!」は1つしか追加されません。

stopOnFalse:falseを返すと以降のfunctionの実行をキャンセルする

オプションに「stopOnFalse」と設定すると、コールバックに複数のfunctionを登録している場合にfunction内でfalseを返すと、以降のfunctionの実行をキャンセルします。まずは「stopOnFalseを利用していない」サンプルで確認します。サンプル(callbacks/04.html)を開いて、body内にbutton要素と2つのp要素があることを確認してください。p要素にはid属性(pinkとgreen)が設定されcssによって背景色が設定されています。

<p id="pink"></p>
<p id="green"></p>

jQueryでは、まず以下の部分を確認してください。2行目でcallbacks.addメソッドを利用して、pinkFuncとgreenFuncの2つのfunctionを登録しています。pinkFuncとgreenFuncは、それぞれ指定したid属性を持つp要素に「hello」と追加します。

var myCall = $.Callbacks();
myCall.add([pinkFunc,greenFunc]);
function pinkFunc(){
	$("p#pink").append("hello");
};
function greenFunc(){
	$("p#green").append("hello");
};

実際にbuttonをクリックすると、両方のp要素に「hello」と追加されます。

続いてオプションにstopOnFalseと設定したサンプルを確認します。サンプル(callbacks/04b.html)を開いて、以下の様にjQueryが変更されていることを確認してください。jQuery.callbacksメソッドの引数にstopOnFalseが設定され、pinkFunc内でfalseを返すようにしただけです。

var myCall = $.Callbacks("stopOnFalse");
myCall.add([pinkFunc,greenFunc]);
function pinkFunc(){
	$("p#pink").append("hello");
	return false;
};
function greenFunc(){
	$("p#green").append("hello");
};

buttonをクリックするとpinkFuncは実行されますがfalseを返しているので、greenFuncの実行はキャンセルされます。そのため背景色がピンクのp要素にしか「hello」と追加されません。functionの実行順はcallbacks.addメソッドで設定した順番通りです。なのでpinkFuncの後にgreenFuncが実行される順番となります。

memory:addメソッドを利用した時に前の設定でfunctionを実行する

オプションに「memory」と設定すると、callbacks.addメソッドを利用した時に以前callbacks.fireメソッドを利用して実行した設定でfunctionが実行されます。まずは「memoryを利用していない」サンプルで確認します。サンプル(callbacks/05.html)を開いて、body内にbutton要素が2つ(id属性はfireとadd)あることを確認してください。

<button id="fire">fire</button>
<button id="add">add</button>

jQueryはcallbacks/01.htmlと似ていますが、buttonがクリックされた時の処理が以下の様になっています。最初にfireボタンをクリックしてください。body要素内に「fire-」と追加されます。その後でaddボタンをクリックしてください。通常の設定ではcallbacks.addメソッドを実行しただけではfunctionは実行されません。なので何も起こりません。

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

続いてサンプル(callbacks/05b.html)を開いて、ほとんどcallbacks/05.htmlと同じ事を確認してください。異なるのは以下の様にjQuery.callbacksメソッドの引数に「memory」が設定されている点だけです。

var myCall = $.Callbacks("memory");
myCall.add(testFunc);
function testFunc(str){
	$("body").append(str);
};

このサンプルでも、最初にfireボタンをクリックしてください。callbacks/05.htmlと同じようにbody要素内に「fire-」と追加されます。続いてaddボタンをクリックして下さい。callbacks/05.htmlと異なり、callbacks.addメソッドを実行しただけでfunctionが実行されます。その際、前回実行したcallbacks.fireメソッドの設定で実行されるため、body内に「fire-」と追加されます。