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

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

deferred.notifyWith( )progressメソッドで指定したfunctionを実行

構文

progressメソッドで指定したfunctionを実行返値:deferredオブジェクト
deferred.notifyWith( コンテキスト [,配列] )ver1.7〜

機能

deferred.notifyWithメソッドを学ぶためには、deferred.notifyメソッドを先に確認してください。

deferred.notifyWithメソッドはdeferred.notifyメソッドと同様に、defferdオブジェクトに利用してdeferred.progressメソッドで設定したfunctionを実行するために利用します。

deferred.notifyメソッドと異なるのは引数の設定です。コンテキストにはdeferred.progressメソッドで設定したfunction内でthisとして利用したい要素を設定します。また、deferred.notifyメソッドと同じように引数を渡すことができますが引数は配列で渡すことに注意して下さい。

解説

thisとして利用したい要素を指定する

サンプル(notifyWith/01.html)を開いてbody内にdiv要素しかないことを確認してください。jQueryでは、まず以下の部分を確認してください。

1行目でdeferredオブジェクトを作成し、2〜4行目でdeferred.progressメソッドを利用して、pending中の処理を設定しています。ここではappnedメソッドを利用してthisで指定される要素内に■を追加していきます。このthisはdeferred.notifyメソッドの引数として設定された要素(コンテキスト)になります

var dfd = $.Deferred();
dfd.progress(function(){
	this.append("■");
});

続いて以下の部分を確認してください。1行目でjavaScriptのsetIntervalメソッドを利用して、testFuncを0.5秒おきに実行しています。testFuncは2〜4行目で作成され、deferred.notifyメソッドを利用して上記deferred.progressメソッドで設定した処理を実行しています。このときにコンテキストとして「$("div")」を設定しているので、上記のdeferred.progressメソッドに設定したfunction内のthisは「$("div")」になります。

setInterval(testFunc,500);
function testFunc(){
	dfd.notifyWith($("div"));
};

結果として、0.5秒おきにdiv要素内に■が追加されていきます。

引数は配列で送ることに注意

deferred.notifyメソッドと同じように、deferred.progressメソッドで設定したfunctionに引数を送ることができます。ただし配列で引数を送ることに注意してください。
サンプル(notifyWith/02.html)を開いてbody内の構成がnotifyWith/01.htmlと同じ事を確認してください。

jQueryは少し変更されており、以下の様にdeferred.notifyWithメソッドの第2引数に配列が設定してあります。サンプルのように送りたい引数が1つでも配列にしなければなりません。

function testFunc(){
	dfd.notifyWith(myTarget, [1]);
};

deferred.progressメソッドで設定したfunctionは以下の様に記述され、引数を変数valで受け取ります(送られてくる値は配列ではありません)。

dfd.progress(function(vol){
	$("body").append(vol);
});

結果として、■が追加されるのではなく引数で送った数字の「1」が追加されていきます。
複数の引数を送るサンプルも紹介しておきます。送られてくる引数は配列ではないので、以下の様にカンマで区切った変数で受け取ります。→参考:サンプル(notifyWith/02b.html

function testFunc(){
	dfd.notifyWith(myTarget, [1, "-"]);
};
dfd.progress(function(vol, str){
	this.append(vol + str);
});

関連項目

コンテキストを渡す必要がない場合はdeferred.notifyメソッドを利用してください。