web-dev-qa-db-ja.com

延期と約束

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

ニーズに合わせて何を使用すればよいですか？ fooExecute()だけを呼び出したいです。たとえば、fooStart()とfooEnd()だけで、html divステータスを切り替えることができます。

//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.???
});
jqueryjquery-deferredpromise
73
fletchsod

最初：$.Promise();は存在しないため使用できません。

遅延オブジェクトは、約束を作成し、その状態をresolvedまたはrejected。通常、遅延関数は、独自の関数を作成し、呼び出し元のコードにプロミスを提供する場合に使用されます。あなたは値のproducerです。

promiseは、名前が示すように、将来の価値についての約束です。コールバックを添付して、その値を取得できます。約束はあなたに「与えられた」ものであり、あなたは未来の価値の受信者です。
約束の状態を変更することはできません。 Promiseをcreatedしたコードのみがその状態を変更できます。

例：

1.（produce）独自の機能のプロミスサポートを提供する場合は、遅延オブジェクトを使用します。値を計算し、約束がいつ解決されるかを制御します。

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）それ自体がプロミスを返す関数を呼び出す場合、独自の遅延オブジェクトを作成する必要はありません。その約束を返すだけです。この場合、関数は値を作成しませんが、転送します（種類）：

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

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

3.（receive）約束/値を作成したり渡したりしたくない場合、直接使用したい場合があります。つまり、あなたは受信者ですいくつかの情報：

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

もちろん、これらのユースケースはすべて混在させることもできます。関数は（たとえばAjax呼び出しから）値のレシーバーになり、それに基づいて異なる値を計算（生成）できます。

関連する質問：

120
Felix Kling

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

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実行が完了しました。

2
Codeman