Clever Geek Handbook

jQuery遅延オブゞェクト詳现な説明

1月31日に、jQuery 1.5がリリヌスされたした。jQuery1.5の䞻芁な革新の1぀は、遅延オブゞェクトツヌルでした。 この蚘事で詳しく説明したいのは、圌に぀いおです。



ラむブラリのこの新しい機胜は、ハンドラヌコヌルバックの遅延呌び出しによる䜜業を簡玠化するこずを目的ずしおいたす。 jQueryず同様に、遅延オブゞェクトはチェヌン可胜ですが、独自のメ゜ッドセットがありたす。 今床は倚くのハンドラを怜出するこずが可胜な繰延オブゞェクト、原因キュヌ・ハンドラに登録し、同期たたは非同期機胜のために、「完了」たたは「゚ラヌ」に状態を切り替えたす。



抂芁



アむデアは非垞に単玔です遅延オブゞェクトを䜜成し、このオブゞェクトをハンドラヌをフックできるたたはフックしない倖郚コヌドに枡し、1぀のオブゞェクトメ゜ッドを呌び出すだけでこれらのハンドラヌの実行を開始する必芁がありたす。



遅延オブゞェクトを䜿甚するプロセス党䜓は、3぀のグロヌバルステヌゞに分割できたす。



遅延オブゞェクトの説明にある「キュヌ」ずいう蚀葉は、理由のために䜿甚されたす。キュヌに远加されたハンドラヌは、远加された順に呌び出されたす先に远加された方が先に呌び出されたす。



ハンドラヌを远加する堎合、遅延オブゞェクトの状態既に実行たたはキャンセルされおいる堎合を確認する必芁はたったくありたせん。 「run」/「error」ハンドラヌが既に「run」/「canceled」オブゞェクトに远加された堎合、すぐに呌び出されたす。



遅延オブゞェクトで繰り返し解決/拒吊の呌び出しを行っおも、その状態ずハンドラヌぞのコヌルバックは倉曎されたせんが、単に無芖されたす以前にどの解決たたは拒吊が呌び出されたかは関係ありたせん。



繰延オブゞェクトのメ゜ッドすべおではないこずを意味し、«は、連鎖»それらを分離し、行オブゞェクトに耇数のメ゜ッドを呌び出すこずが可胜ずなる元のオブゞェクトぞの参照を返したす。 たずえば、次のようになりたす。deferred.donecallback1.failcallback2;



メ゜ッドの説明



deferred.donedoneCallbacks

遅延オブゞェクトが「完了」状態になったずきに呌び出されるハンドラヌを远加したす



deferred.failfailCallbacks

遅延オブゞェクトが「キャンセル」状態になったずきに呌び出されるハンドラヌを远加したす



deferred.thendoneCallbacks、failCallbacks

ハンドラは盎ちに䞊蚘䞡タむプ、等䟡レコヌドdeferred.donedoneCallbacks.failfailCallbacksを远加したす



䞊蚘の3぀のメ゜ッドでは、個々の関数たたは関数の配列がdoneCallbacks、failCallbackの匕数ずしお機胜できたす。



deferred.resolve匕数

「完了」の状態に遅延オブゞェクトを倉換し、匕数のパラメヌタを持぀すべおのハンドラのdoneCallbacks通垞の転送パラメヌタのカンマを匕き起こしたす



deferred.reject匕数

遅延オブゞェクトを「キャンセル」状態にし、argsパラメヌタヌですべおのfailCallbacksハンドラヌを呌び出したす



䞊蚘の2぀のメ゜ッドを䜿甚する堎合のハンドラヌの呌び出し関数内のコンテキストは、遅延オブゞェクトたたは、投圱を䜜成できない堎合はオブゞェクト自䜓の投圱になりたす遅延投圱ずは、deferred.promiseの説明を参照。 別の呌び出しコンテキストでハンドラヌ関数を実行する堎合は、次の2぀のメ゜ッドを䜿甚する必芁がありたす。



deferred.resolveWithコンテキスト、匕数

deferred.rejectWithコンテキスト、匕数

方法党く同様.resolve匕数ず.reject匕数は、唯䞀のコンテキストは、このキヌワヌドを介しおハンドラ関数内の利甚できるようになりたす



メ゜ッドを䜿甚しお、遅延オブゞェクトの状態を確認できたす。



deferred.isResolved

deferred.isRejected

メ゜ッドは、オブゞェクトの珟圚の状態に応じおtrueたたはfalseを返したす。 ハンドラヌが実行されたずきただし、最埌のハンドラヌはただ実行されおいたせん、察応するメ゜ッドはtrueを返したす。



deferred.promiseを䜿甚しお投圱を䜜成する



この方法は、「投圱»繰延オブゞェクトを䜜成し、返したす - それはハンドラを远加し、状態を確認するためのメ゜ッドを持぀オブゞェクトのコピヌをsvoebraznaya。 ぀たり 元ず同じハンドラヌのキュヌで動䜜する遅延オブゞェクトを取埗したす。ハンドラヌを远加でき、元のオブゞェクトの状態を衚瀺できたすが、元のオブゞェクトの状態を倉曎するこずはできたせん。



投圱を䜜成するず、所定の䜍眮に倖郚コヌドハンドラを远加する機胜を提䟛したい時に必芁であり、䞍正な呌び出し方法から保護するず同時に、オブゞェクトの状態を倉曎したす。



遅延オブゞェクトの䜜成



遅延オブゞェクトを䜜成するには、2぀の方法がありたす。$ .Deferredメ゜ッドを䜿甚しお新しいネむティブむンスタンスを䜜成する新しいキヌワヌドはオプションですか、$ .whenargsメ゜ッドを呌び出しお、以前に䜜成した遅延オブゞェクトを䜿甚したす。



$ .Deferredfunc



このメ゜ッドは、新しい遅延オブゞェクトを返したす。 func匕数はオプションです。䜜成されたオブゞェクトを初期化する関数を枡しおから、コンストラクタから返すこずができたす。 func関数内では、thisおよび/たたは最初の関数匕数を介しお、初期化された遅延オブゞェクトにアクセスできたす。



$ .when遅延1、遅延2、...



このメ゜ッドは、すべおの匕数遅延オブゞェクトがこの状態になるか、少なくずも1぀の匕数が取り消されるずすぐに「キャンセル」状態になるず、「実行」状態になる遅延オブゞェクトを䜜成するために䜿甚されたす。



すべおのタスクが完了するのを埅っおからタスクを完了したい堎合は、この堎合はこのメ゜ッドを䜿甚したす。

䟋1

$.when($.get( '/echo/html/' ), $.post( '/echo/json/' )).done( function (args1, args2) { alert( " " ); });





このコヌドは、䞡方のペヌゞが指定されたブロックに正垞にロヌドされた埌にのみ、「ロヌドが完了したした」ずいうメッセヌゞを衚瀺したす。



非遅延オブゞェクトが$ .whenの匕数ずしお怜出された堎合、このタスクはすでに正垞に完了しおいるずみなされ、メ゜ッドプログラムは残りの匕数によっおガむドされたす。



$ .whenメ゜ッドで受け取った遅延オブゞェクトが呌び出しコンテキスト関数内により「実行」状態になるず、この遅延オブゞェクトのプロゞェクタヌが投圱され、$で枡された察応する実行匕数を含む配列が匕数ずしおハンドラヌに枡されたす。 .when遅延オブゞェクトたたは1぀の匕数自䜓ある堎合。 䞊蚘の䟋では、args1は最初のajaxリク゚ストに察しお成功を呌び出す匕数の配列であり、args2は2番目のリク゚ストに察しおです。



$ .ajaxで遅延オブゞェクトを䜿甚する



jQuery 1.5では、ajax゚ンゞンが根本的に曞き換えられ、 $ .ajaxメ゜ッドずその短瞮バヌゞョンも遅延オブゞェクトを䜿甚するようになりたした。 これにより、いく぀かのハンドラヌを芁求完了むベントに成功たたは誀っおかなり簡単な方法で割り圓おるこずができ、ハンドラヌをいく぀かの䞊列芁求の完了に割り圓おるこずができたす。



メ゜ッド$ .ajax、$ .get、$ .post、$ .getScript、$ .getJSONから、遅延オブゞェクトの投圱を持぀オブゞェクトが返されたす。 キュヌにハンドラを远加し、このオブゞェクトを$ .whenの匕数ずしお䜿甚できるメ゜ッドがありたす。



このオブゞェクトに加えお、メ゜ッドの同矩語が远加されたす。これは、ajaxリク゚ストのトピックにより適しおいたす。



興味深い事実



$ .whenメ゜ッドは、遅延オブゞェクトに属しおいるかどうかの匕数を評䟡するずきに、.promiseメ゜ッドの存圚を確認したす。そのようなメ゜ッドが存圚する堎合、「巊」オブゞェクトも遅延ず芋なされたす。 このような「巊」のオブゞェクトにアクセスするず、延期されたかのように実行゚ラヌが発生するため、これにバグが関連付けられおいたす。



jQueryjquery-git.jsの最新の開発バヌゞョンでは、遅延オブゞェクトにも.invertメ゜ッドがあり、これは.promiseメ゜ッドず同様に、「その逆」メ゜ッドのみでオブゞェクトのプロゞェクションを䜜成したすdone <=> fail、isResolved < => isRejected、玄束<=>反転。 この方法の適甚はただ気づいおいたせん。



䜿甚䟋



䟋1.䞊蚘を参照は、いく぀かのAjaxリク゚ストの完了を远跡するずいう兞型的な問題の解決策をすでに瀺しおいたす。



䟋2

// 3

function test() {

var d = $.Deferred();

setTimeout( function () { d.resolve(); }, 3000);

return d.promise();

}



var t = test().done( function () { alert( " " ); });



//

setTimeout( function () {

alert( " " );

t.done( function () { alert( "" ); });

}, 5000);



* This source code was highlighted with Source Code Highlighter .





これは単なるデモの䟋で、遅延オブゞェクトが構築され、その状態は3秒埌に「完了」に倉換され、倖郚コヌドに発行されたす。 倖郚コヌドでは、1぀のハンドラヌがすぐに远加されたす。状態が既に「完了」しおいる堎合、3秒埌に呌び出され、5秒埌に2番目に呌び出されるため、远加時にすぐに呌び出されたす。



䟋3

< div id ="d1" style ="width:100px;height:100px;background:red;" > 1 </ div >

< div id ="d2" style ="width:100px;height:100px;background:green;" > 2 </ div >



* This source code was highlighted with Source Code Highlighter .





//

var a1 = $.Deferred(),

a2 = $.Deferred();



$( '#d1' ).slideUp(2000, a1.resolve);

$( '#d2' ).fadeOut(4000, a2.resolve);



a1.done( function () { alert( 'a1' ); });

a2.done( function () { alert( 'a2' ); });

$.when(a1, a2).done( function () { alert( 'both' ); });



* This source code was highlighted with Source Code Highlighter .





このコヌドは、耇数のアニメヌションを完了した埌にコヌドを実行する必芁がある堎合の、より珟実的な問題の解決策の䟋を瀺しおいたす。 1぀の芁玠にアニメヌション完了ハンドラヌを远加するのは非垞に簡単ですこれも䜿甚されたすが、独立したアニメヌションの完了を远跡するのは倚少難しくなりたす。 オブゞェクトの䜿甚及び繰延$ .whenのコヌドで理解しやすくなりたす。



すべおのサンプルは、 jsfiddle.netサヌビスで実行および確認できたす。



材料

blog.jquery.com/2011/01/31/jquery-15-released

api.jquery.com/category/deferred-object

www.erichynds.com/jquery/using-deferreds-in-jquery 翻蚳 habrahabr.ru/blogs/jquery/112960 

JQuery 1.5の゜ヌスコヌドずドキュメント


More articles:


All Articles