85 votes

Différé contre promesse

Quelle est la différence entre Deferred et Promise en dehors des versions de jQuery ?

Que dois-je utiliser pour répondre à mon besoin ? Je veux seulement appeler le fooExecute() . Je n'ai besoin que du fooStart() y fooEnd() pour faire basculer le statut de la 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.???
});

136voto

Felix Kling Points 247451

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

A objet différé est un objet qui peut créer une promesse et changer son état en resolved o rejected . Les Deferreds sont typiquement utilisés si vous écrivez votre propre fonction et que vous souhaitez fournir une promesse au code appelant. Vous êtes la fonction producteur de la valeur.

A promesse est, comme son nom l'indique, une promesse de valeur future. Vous pouvez y attacher des callbacks pour obtenir cette valeur. La promesse vous a été "donnée" et vous en êtes l'auteur. 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 d'é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. ( avant ) 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 (en quelque sorte) :

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 destinataire d'une information :

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

Bien entendu, tous ces cas d'utilisation peuvent également être mélangés. Votre fonction peut recevoir une valeur (provenant d'un appel Ajax par exemple) et calculer (produire) une valeur différente sur la base de cette valeur.


Questions connexes :

2voto

Pheonixblade9 Points 6136

Une promesse est un élément que vous pouvez placer sur un objet différé et qui s'exécute lorsque la collecte 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 permet d'exécuter une fonction sur chaque div et exécute le .promise lorsque tous les .each les exécutions sont terminées.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X