Aufgeschoben gegen Versprechen

82

Was ist der Unterschied zwischen Deferred und Promise außer den jQuery-Versionen?

Was soll ich für meinen Bedarf verwenden? Ich möchte nur die anrufen fooExecute(). Ich brauche nur das fooStart()und, fooEnd()um zum Beispiel den HTML-Div-Status umzuschalten.

//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.???
});
jquery jquery-deferred promise fletchsod
quelle
Mögliche Hilfe?
Codeman
2
Sie können den Status des Versprechens nicht ändern. Daher wird es an die anfordernde Logik (die möglicherweise nichts damit zu tun hat, die Bedingungslogik zu manipulieren - aufzulösen oder abzulehnen) - auf die Auflösung zu warten - aus der Factory-Logik, die diese Verzögerung tatsächlich erstellt hat. Aufgeschoben kann geändert werden, resolveum rejectseinen Zustand zu ändern, was auch sein Versprechen widerspiegelt. Sagen Sie mir, wie Sie verzögerte Klicks verwenden möchten.
Andrevinsky
Ich glaube nicht, dass Ihr Beispiel von Versprechungen profitieren könnte (oder ich verstehe es nicht). Vielleicht werfen Sie einen Blick auf Wie kann jQuery verzögert verwendet werden? .
Felix Kling

Antworten:

131

Erstens: Sie können nicht verwenden, $.Promise();weil es nicht existiert.

Ein zurückgestelltes Objekt ist ein Objekt, das ein Versprechen erstellen und seinen Status in resolvedoder ändern kann rejected. Zurückgestellte werden normalerweise verwendet, wenn Sie Ihre eigene Funktion schreiben und dem aufrufenden Code ein Versprechen geben möchten. Sie sind der Produzent des Wertes.

Ein Versprechen ist, wie der Name schon sagt, ein Versprechen über den zukünftigen Wert. Sie können Rückrufe anhängen, um diesen Wert zu erhalten. Das Versprechen wurde Ihnen "gegeben" und Sie sind der Empfänger des zukünftigen Wertes.
Sie können den Status des Versprechens nicht ändern. Nur der Code, der das Versprechen erstellt hat, kann seinen Status ändern.

Beispiele:

1. ( produzieren ) Sie verwenden zurückgestellte Objekte, wenn Sie Versprechen für Ihre eigenen Funktionen unterstützen möchten. Sie berechnen einen Wert und möchten steuern, wann das Versprechen gelöst wird.

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. ( vorwärts ) Wenn Sie eine Funktion aufrufen, die selbst ein Versprechen zurückgibt, müssen Sie kein eigenes zurückgestelltes Objekt erstellen. Sie können dieses Versprechen einfach zurückgeben. In diesem Fall schafft die Funktion keinen Wert, sondern leitet ihn weiter (Art):

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

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

3. ( empfangen ) Manchmal möchten Sie keine Versprechen / Werte erstellen oder weitergeben, Sie möchten sie direkt verwenden, dh Sie sind der Empfänger einiger Informationen:

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

Natürlich können alle diese Anwendungsfälle auch gemischt werden. Ihre Funktion kann der Wertempfänger sein (z. B. von einem Ajax-Aufruf) und darauf basierend einen anderen Wert berechnen (erzeugen).

Verwandte Fragen:

Felix Kling
quelle
2

Ein Versprechen können Sie für ein zurückgestelltes Objekt festlegen, das ausgeführt wird, wenn die zurückgestellte Sammlung abgeschlossen ist.

Beispiel aus der jQuery-Dokumentation :

<!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>

Hier ist es in JSFiddle

Dies führt jeweils eine Funktion aus divund führt den .promiseCode aus, wenn alle .eachAusführungen abgeschlossen sind.

Codeman
quelle