<p>What is the difference between Deferred and Promise other than the jQuery versions?</p> <p>What should I use for my need? I only want to call the <code>fooExecute()</code>. I only need the <code>fooStart()</code> and <code>fooEnd()</code> to toggle the html div status for example.</p> <pre class="prettyprint"><code>//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.??? }); </code></pre>

<p>First: You cannot use <code>$.Promise();</code> because it does not exist.</p> <p>A <strong>deferred object</strong> is an object that can <em>create</em> a promise and change its state to <code>resolved</code> or <code>rejected</code>. Deferreds are typically used if you write your own function and want to provide a promise to the calling code. You are the <strong>producer</strong> of the value.</p> <p>A <strong>promise</strong> is, as the name says, a promise about future value. You can attach callbacks to it to get that value. The promise was "given" to you and you are the <strong>receiver</strong> of the future value.<br> You cannot modify the state of the promise. Only the code that <em>created</em> the promise can change its state.</p> <h3>Examples:</h3> <p>1. (<strong>produce</strong>) You use deferred objects when you want to provide promise-support for your own functions. You compute a value and want to control when the promise is resolved.</p> <pre class="prettyprint"><code>function callMe() { var d = new $.Deferred(); setTimeout(function() { d.resolve('some_value_compute_asynchronously'); }, 1000); return d.promise(); } callMe().done(function(value) { alert(value); }); </code></pre> <p>2. (<strong>forward</strong>) If you are calling a function which itself returns a promise, then you don't have to create your own deferred object. You can just return that promise. In this case, the function does not create value, but forwards it (kind of):</p> <pre class="prettyprint"><code>function fetchData() { // do some configuration here and pass to `$.ajax` return $.ajax({...}); } fetchData().done(function(response) { // ... }); </code></pre> <p>3. (<strong>receive</strong>) Sometimes you don't want to create or pass along promises/values, you want to use them directly, i.e. you are the receiver of some information:</p> <pre class="prettyprint"><code>$('#my_element').fadeOut().promise().done(function() { // called when animation is finished }); </code></pre> <p>Of course, all these use cases can be mixed as well. Your function can be the receiver of value (from an Ajax call for example) and compute (produce) a different value based on that.</p> <hr> <p>Related questions:</p> <ul> <li>What are the differences between Deferred, Promise and Future in JavaScript?</li> <li>What's the difference between a Deferred object and its own promise object?</li> </ul>

<p>A promise is something you can set on a deferred object that executes when the deferred collection is complete.</p> <p>Example from the jQuery documentation:</p> <pre class="prettyprint"><code><!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> </code></pre> <p>Here it is in JSFiddle</p> <p>This runs a function on each <code>div</code> and executes the <code>.promise</code> code when all <code>.each</code> executions are complete.</p>

Deferred versus promise

What is the difference between Deferred and Promise other than the jQuery versions?

What should I use for my need? I only want to call the fooExecute(). I only need the fooStart() and fooEnd() to toggle the html div status for example.

//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.??? });

What is Deferred in promise?

The deferred. promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.

What is Deferred and promise in Angularjs?

Simply put you can use $q. defer() to create a Promise. A Promise is a function that returns a single value or error in the future. So whenever you have some asynchronous process that should return a value or an error, you can use $q. defer() to create a new Promise.

How do you use Deferred?

Deferred method can be passed an optional function, which is called just before the method returns and is passed the new deferred object as both the this object and as the first argument to the function. The called function can attach callbacks using deferred. then() , for example.

What is Deferred resolve?

deferred. resolve() - means request succeeded. deferred. reject() - request failed.

First: You cannot use $.Promise(); because it does not exist.

A deferred object is an object that can create a promise and change its state to resolved or rejected. Deferreds are typically used if you write your own function and want to provide a promise to the calling code. You are the producer of the value.

A promise is, as the name says, a promise about future value. You can attach callbacks to it to get that value. The promise was "given" to you and you are the receiver of the future value.
You cannot modify the state of the promise. Only the code that created the promise can change its state.

Examples:

1. (produce) You use deferred objects when you want to provide promise-support for your own functions. You compute a value and want to control when the promise is resolved.

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) If you are calling a function which itself returns a promise, then you don't have to create your own deferred object. You can just return that promise. In this case, the function does not create value, but forwards it (kind of):

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

3. (receive) Sometimes you don't want to create or pass along promises/values, you want to use them directly, i.e. you are the receiver of some information:

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

Of course, all these use cases can be mixed as well. Your function can be the receiver of value (from an Ajax call for example) and compute (produce) a different value based on that.

Deferred versus promise

Tags:

jquery

promise

jquery-deferred

fletchsod

People also ask

2 Answers

Examples:

Felix Kling

Codeman

Recent Activity

Donate For Us