jquery - 遅延対約束

Question

jQuery バージョン以外の Deferred と Promise の違いは何ですか?

必要に応じて何を使用すればよいですか? を呼び出したいだけですfooExecute()。たとえば、html div ステータスを切り替えるにはfooStart()andのみが必要です。fooEnd()

//I'm using jQuery v2.0.0
function fooStart() { /* Start Notification */ }
function fooEnd() { /* End Notification */ }
function fooExecute() { /* Execute the scripts */ }

$('#button1').on('click', function() {
    var deferred1 = $.Deferred();
    var promise1 = $.Promise();

    deferred1.???

    promise1.???
});

score 135 · Accepted Answer

１つ目：存在しないので使え$.Promise();ません。

deferred オブジェクトは、promise を作成し、その状態をresolvedorに変更できるオブジェクトですrejected。Deferred は通常、独自の関数を作成し、呼び出し元のコードに promise を提供する場合に使用されます。あなたは価値の生産者です。

約束とは、その名の通り、将来の価値についての約束です。コールバックをアタッチして、その値を取得できます。約束はあなたに「与えられた」ものであり、あなたは将来の価値の受け手です。
promise の状態を変更することはできません。promise を作成したコードのみがその状態を変更できます。

例:

1. ( Produce ) 独自の関数に promise サポートを提供する場合は、遅延オブジェクトを使用します。値を計算し、promise がいつ解決されるかを制御したいとします。

function callMe() {
    var d = new $.Deferred();
    setTimeout(function() {
        d.resolve('some_value_compute_asynchronously');
    }, 1000);
    return d.promise();
}

callMe().done(function(value) {
    alert(value);
});

2. ( forward ) それ自体が promise を返す関数を呼び出している場合、独自の遅延オブジェクトを作成する必要はありません。その約束を返すだけです。この場合、関数は値を作成しませんが、転送します (一種の):

function fetchData() {
    // do some configuration here and pass to `$.ajax`
    return $.ajax({...});
}

fetchData().done(function(response) {
    // ...
});

3. ( receive ) Promise/Value を作成したり渡したりしたくない場合、それらを直接使用したい場合があります。つまり、あなたはいくつかの情報の受信者です。

$('#my_element').fadeOut().promise().done(function() {
    // called when animation is finished
});

もちろん、これらすべてのユースケースを混在させることもできます。関数は値の受信者 (たとえば、Ajax 呼び出しから) になり、それに基づいて別の値を計算 (生成) することができます。

関連する質問:

score 2 · Accepted Answer

promise は、遅延コレクションが完了したときに実行される遅延オブジェクトに設定できるものです。

jQuery ドキュメントの例:

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  height: 50px; width: 50px;
  float: left; margin-right: 10px;
  display: none; background-color: #090;
}
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>


<script>
$("button").on( "click", function() {
  $("p").append( "Started...");

  $("div").each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * (i+1) );
  });

  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>

</body>
</html>

ここにJSFiddleがあります

これにより、それぞれに対して関数が実行され、すべての実行が完了divすると.promiseコードが実行されます。.each

jquery - 遅延対約束

2 に答える 2

例:

Related

Reference