web-dev-qa-db-ja.com

jqueryのpromiseメソッドは実際にどのように機能しますか？

delegateとpromiseが何であるか、私は本当に理解していません。

ドキュメントによると-

  • delegateは、セレクターとイベントを、現在および将来のアイテムのために後で再び使用できるある種のラッピングコンテナーにバインドします。
  • promise()は、新しく読み込まれたものがすべて一致した場合、最初にバインドされたときの状態にマッピングし直します。たぶん、私はこの約束の方法を本当に理解していないでしょう。

ラッパーはまだ存在しているが、ラッパーコンテナーのコンテンツが変更された場合、および/またはAjaxを介してリロードされた場合はどうなりますか？イベントが最初にバインドされたときのように、イベントがトリガーまたは動作しないのはなぜですか？

そして、はい、私はドキュメントのページに行ってきました、彼らの説明を完全に理解していません。

ajaxjqueryjquery-deferred
62
robx

私はこの質問に少し混乱しています。これは、youがpromiseとdelegateによって混同されているためだと思います。実際、これらはjQueryの完全に無関係な機能です。それぞれ個別に説明します。

delegate

delegate は、jQuery 1.4.2で導入されたjQueryの機能です。 （jQuery 1.3で追加された live 機能へのより良いアプローチです）。 DOMの変更に伴う特定の問題、特にAJAX呼び出しに関する問題を解決します。

イベントハンドラーをバインドすると、それを選択範囲にバインドします。したがって、$('.special').click(fn)を実行して、イベントハンドラーをspecialクラスのすべてのメンバーにバインドできます。これらの要素にバインドするため、それらの要素の1つからクラスを削除しても、イベントはトリガーされます。逆に、クラスを要素に追加する（またはDOMに新しい要素を追加する）場合、イベントはバインドされません。

「イベントバブリング」と呼ばれるこれを軽減するJavascriptの機能があります。イベントがトリガーされると、最初にブラウザーがイベントの発生元の要素に通知します。次に、DOMツリーを上に移動し、各祖先要素に通知します。これは、DOMツリーの上位の要素にイベントハンドラーをバインドでき、子要素（ハンドラーがバインドされたときに存在しなかった要素も含む）でトリガーされたイベントをバインドできることを意味します。

delegateは、jQueryによるこの実装です。まず、親要素を選択します。次に、セレクターを指定します。ハンドラーは、元の要素がこのセレクターと一致する場合にのみ実行されます。次に、 click と同様に、submit、keydown、bindなどのイベントタイプを指定します。最後に、イベントハンドラーを指定します。

$('#containingElement').delegate('a.special', 'click', function() {
    alert('This will happen on all links with the special class');
});

promise

promise は、jQuery機能セットへの比較的最近の追加です。これは、jQuery 1.5で導入された Deferred コンセプトの一部です。 （「遅延」と「デリゲート」の音の類似性は、おそらく混乱の原因だと思います。）これは、非同期コードの複雑さを抽象化する方法です。 $.ajaxによって返されるオブジェクトはDeferredオブジェクトであるため、これの最良の例はAJAX呼び出し）です。

$.ajax({
    url: 'somepage.cgi',
    data: {foo: 'bar'}
}).done(function() {
    // this will be run when the AJAX request succeeds
}).fail(function() {
    // this will be run when the AJAX request fails
}).always(function() {
    // this will be run when the AJAX request is complete, whether it fails or succeeds
}).done(function() {
    // this will also be run when the AJAX request succeeds
});

したがって、複数のハンドラーをバインドでき、最初の呼び出し後にバインドできることを除いて、$.ajax呼び出しで成功ハンドラーをバインドするのと多くの点で同じです。

非同期に対処するのが役立つ別の機会は、アニメーションです。関数にコールバックを提供できますが、上記で提供したAJAXの例と同様の構文でこれを行う方が良いでしょう。

JQuery 1.6では、この機能が可能になり、 promise はこの実装の一部です。 jQuery選択でpromiseを呼び出すと、オブジェクト内のすべてのアニメーションが完了したときに、イベントハンドラーをバインドできるオブジェクトを取得します。

例えば：

$('div.special').fadeIn(5000).promise().then(function() {
    // run when the animation succeeds
}).then(function() {
    // also run when the animation succeeds
});

繰り返しますが、これは従来の方法と事実上似ていますが、柔軟性を追加します。後でハンドラーをバインドでき、複数のハンドラーをバインドできます。

概要

基本的に、delegateとpromiseの間に重要な関係はありませんが、どちらも現代のjQueryの便利な機能です。

199
lonesomeday