4

私は deferreds を学習していますが、これがどのように/なぜ機能するのかわかりません:

<html>
<head>
</head>
<body>
    <div>
        1</div>
    <div>
        2</div>
    <div>
        3</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $("div").each(function (i) {
            $(this).delay(1000 * i).fadeOut();
        }).promise().done(function () { console.log("it's done"); });
</script>
</body>
</html>

具体的には、なぜ各後に promise を呼び出すことができるのですか? なぜ技術的に可能なのですか？私は console.logged:

console.log($("div").each(function (i) {}));

プロトタイプにpromiseメソッドが表示されます。しかし、私の各関数は値を返しません。単に次のものがあります。

$(this).delay(1000 * i).fadeOut();

では、プロミスはどのようにアニメーションの結果に結びつくのでしょうか? (基本的に各反復の結果)

EDIT 1: 明確にするために、おそらく次のように質問を書くべきでした:

すべてのアニメーションが終了した後に done メソッドが呼び出される方法 == promise が各コールバック関数内で実行されるアニメーションにどのように相互接続されているか。

4

2 に答える 2

4

プロミスで使われているのを見たことがありませんeachが、アニメーションだけです

$('div') 
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){ 
   console.log('all done');
});

これにより、すべての div が一度にアニメーション化され、すべての div のアニメーション化が終了したときにコールバックが実行されます。ループ内の animate の問題は、それを調整できず、promise を使用しないとすべての終了を制御できないことです。本当に を使用したい場合はeach、 の配列を作成してから使用する必要がありpromisesますthen

 var promises = [];
 $('div').each(function(){
    var $this = $(this);
    promises.push($this.fadeOut('slow').promise());
 });

 $.when.apply($, promises).then(function(){
   console.log('all done');
 });

$('div').fadeOut('slow', function(){ alert('done'); });プロミスは多くのサブタスクを持つ「タスク」のように処理されますが、アニメーション化された各要素に対してコールバックが発生するため、これは行うことと同じではありません

http://jsfiddle.net/LbHrQ/3/

プロミスの最適な使用法は、アニメーション、ajax、タイムアウトを使用するものなど、本質的にいくつかの非同期操作を同期する場合です (この場合、resolve()Deferred を手動で行う必要があります)。

于 2013-01-19T14:48:38.657 に答える
2

ブロック内promise()にメソッドを追加しようとしましたか? 現時点では、すべての反復が終了した後にのみ実行しています。

$("div").each(function (i) {
   $(this).delay(1000 * i).fadeOut().promise().done(function () { console.log("This individual animation is done."); });
}).promise().done(function () { console.log("Everything is done."); });

セレクターdivは、実際にはページ上のかなりの数の要素を参照しています。それらすべてを反復処理するときに、この要素に対して特定のアクションを実行します。

次に行うことは、それらの要素に関連付けられた以前のすべてのアクションが終了したときに、jQuery に別のアクションを実行するように要求することです。ドキュメントによると、オブジェクトを返します。

キューに入れられたかどうかに関係なく、コレクションにバインドされた特定のタイプのすべてのアクションが終了したとき。

そのため、コレクション内でevery が実行された後、がアクティブ化されます。fadeOut()console.log()

于 2013-01-19T14:11:01.230 に答える