web-dev-qa-db-fra.com

Différé contre promesse

Quelle est la différence entre Deferred et Promise autre que les versions jQuery?

Que dois-je utiliser pour mon besoin? Je veux seulement appeler la fooExecute(). J'ai seulement besoin de fooStart() et fooEnd() pour basculer le statut div html par exemple.

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

Premièrement: vous ne pouvez pas utiliser $.Promise(); car il n'existe pas.

Un objet différé est un objet qui peut créer une promesse et changer son état en resolved ou rejected. Les différés sont généralement utilisés si vous écrivez votre propre fonction et souhaitez fournir une promesse au code appelant. Vous êtes le producteur de la valeur.

Une promesse est, comme son nom l'indique, une promesse de valeur future. Vous pouvez lui associer des rappels pour obtenir cette valeur. La promesse vous a été "donnée" et vous êtes le récepteur de la valeur future.
Vous ne pouvez pas modifier l'état de la promesse. Seul le code qui créé la promesse peut changer son état.

Exemples:

1. ( produire ) Vous utilisez des objets différés lorsque vous souhaitez fournir un support de promesse pour vos propres fonctions. Vous calculez une valeur et souhaitez contrôler le moment où la promesse est résolue.

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 ) Si vous appelez une fonction qui renvoie elle-même une promesse, vous n'avez pas besoin de créer votre propre objet différé. Vous pouvez simplement retourner cette promesse. Dans ce cas, la fonction ne crée pas de valeur, mais la transmet (sorte de):

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

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

3. ( recevoir ) Parfois, vous ne voulez pas créer ou transmettre des promesses/valeurs, vous voulez les utiliser directement, c'est-à-dire que vous êtes le récepteur de quelques informations:

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

Bien sûr, tous ces cas d'utilisation peuvent également être mélangés. Votre fonction peut être le récepteur de valeur (à partir d'un appel Ajax par exemple) et calculer (produire) une valeur différente en fonction de cela.

Questions connexes:

120
Felix Kling

Une promesse est quelque chose que vous pouvez définir sur un objet différé qui s'exécute lorsque la collection différée est terminée.

Exemple de la documentation 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>

Le voici dans JSFiddle

Cela exécute une fonction sur chaque div et exécute le .promise code quand tout .each les exécutions sont terminées.

2
Codeman