// Q sample by Jeff Cogswell | |
/*=========== | |
We want to call these three functions in sequence, one after the other: | |
First we want to call one, which initiates an ajax call. Once that | |
ajax call is complete, we want to call two. Once two's ajax call is | |
complete, we want to call three. | |
BUT, we don't want to just call our three functions in sequence, as this quick | |
demo will show. Look at this sample function and think about what order | |
the console.log calls will happen: | |
===========*/ | |
function demo() { | |
$.ajax( { | |
url: '/', | |
success: function() { | |
console.log('AJAX FINISHED'); | |
} | |
}); | |
} | |
console.log('Calling demo'); | |
demo(); | |
console.log('Finished calling demo'); | |
/*==== | |
The function returns almost immediately, before the ajax call is complete. | |
That means we will likely see 'Finished calling demo' before we see the | |
results of the ajax call: | |
====*/ | |
//Calling demo | |
//Finished calling demo | |
//AJAX FINISHED | |
/*==== | |
If we want to chain a following function, when do we call it? | |
We call it from inside the success function: | |
====*/ | |
function demo() { | |
$.ajax( { | |
url: '/', | |
success: function() { | |
console.log('AJAX FINISHED'); | |
// >>>> THIS IS WHEN you would call another function <<<<< | |
} | |
}); | |
} | |
/* ============== | |
Now let's try using q. | |
=============*/ | |
function one() { | |
var deferred = Q.defer(); // Don't worry yet what this is | |
// until after you understand the flow | |
console.log("Starting one's ajax"); | |
$.ajax( { | |
url: '/', | |
success: function() { | |
// Here's where you want to call the next function in the | |
// list if there is one. To do it, call deferred.resolve() | |
console.log('Finished with one. Ready to call next.'); | |
deferred.resolve(); | |
} | |
}); | |
// The deferred object has a "promise" member, | |
// which has a "then" function | |
return deferred.promise; | |
} | |
function two() { | |
var deferred = Q.defer(); | |
console.log("Starting two's ajax"); | |
$.ajax( { | |
url: '/', | |
success: function() { | |
// Again, this is where you want to call the next function | |
// in the list if there is one. | |
console.log('Finished with two. Ready to call next.'); | |
deferred.resolve(); | |
} | |
}); | |
// The deferred object has a "promise" member, | |
// which has a "then" function | |
return deferred.promise; | |
} | |
function three() { | |
var deferred = Q.defer(); | |
console.log("Starting three's ajax"); | |
$.ajax( { | |
url: '/', | |
success: function() { | |
// Again, this is where you want to call the next function | |
// in the list if there is one. | |
console.log('Finished with three. Ready to call next if there is one.'); | |
deferred.resolve(); | |
} | |
}); | |
// The deferred object has a "promise" member, which has a "then" function | |
return deferred.promise; | |
} | |
// Test it out. Call the first. Pass the functions | |
// (without calling them, so no parentheses) into the then calls. | |
one() | |
.then(two) | |
.then(three); | |
/* ===== | |
Think about where the "then" function comes from. Each function | |
creates a new defer instance and returns that object's promise | |
member. That promise object has a "then" function. On return | |
from the first function, you get back a defer function, and | |
call the "then" function, passing the *next* function that is | |
to be called. Internally, Q stores that function. When your | |
ajax call returns, in your "success" function, you call the | |
next function by calling deferred.resolve(). | |
======*/ |
This comment has been minimized.
This comment has been minimized.
great! thanks. |
This comment has been minimized.
This comment has been minimized.
thanks a lott :) |
This comment has been minimized.
This comment has been minimized.
now that is a sweet example |
This comment has been minimized.
This comment has been minimized.
Very instructive. Thank you. |
This comment has been minimized.
This comment has been minimized.
Nice example. I just thought passing some argument to the different methods could be interesting (for ex two will work on the value from one, three from two, ...). |
This comment has been minimized.
This comment has been minimized.
@Heshyo -- Excellent! |
This comment has been minimized.
This comment has been minimized.
Great example -- thank you. |
This comment has been minimized.
This comment has been minimized.
Check out the forks for some good updates to this example. |
This comment has been minimized.
This comment has been minimized.
Finally, an example that actually makes sense to me. |
This comment has been minimized.
This comment has been minimized.
thanks ... good example |
This comment has been minimized.
This comment has been minimized.
Merci beaucoup pour votre exemple, ca m'a vraiment aidé.... thanks |
This comment has been minimized.
This comment has been minimized.
I got it now, thanks! |
This comment has been minimized.
This comment has been minimized.
Excellent description! |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
A much better example for beginners than the one given in the project. And I totally agree that non working examples are not helpful. |
This comment has been minimized.
This comment has been minimized.
Really explanatory, thanks! |
This comment has been minimized.
This comment has been minimized.
This example really got me on board, thanks! |
This comment has been minimized.
This comment has been minimized.
Finally a practical and well documented example. Thanks for your efforts! |
This comment has been minimized.
This comment has been minimized.
awesome |
This comment has been minimized.
This comment has been minimized.
super! |
This comment has been minimized.
This comment has been minimized.
I ported this gist on yolpo |
This comment has been minimized.
This comment has been minimized.
I liked this example - can you show one with passing return values between three function too? |
This comment has been minimized.
This comment has been minimized.
is this a right way to do it? we can imagine that this works for async functions, right? function one(){ function two(test){ function three(){ one() |
This comment has been minimized.
This comment has been minimized.
If I want to introduce a delay between lets say two and three, I create:
And then I call:
I don't see the delay occuring until after three runs. I see:
What's going wrong? |
This comment has been minimized.
This comment has been minimized.
Even this example is not clear. For one thing, what is the $ variable? Is it the jQuery handle? If so, where is the require statement for jQuery? Is this only for the browser? Where is the script tag to load jQuery or Q? I tried running it in NodeJS (since that's what I want Q for). Is there a $.ajax function for the server side? |
This comment has been minimized.
This comment has been minimized.
Wouldn't it be much clearer/respresentative to rewrite the example as one()
.then(new function() {
return two();
})
.then(new function() {
return delay(2000);
})
.then(new function() {
return three();
})
.fail(new function(err) {
console.log("Something went terribly wrong between 1, 2 and 3! " + err);
}); |
This comment has been minimized.
This comment has been minimized.
Thanks for the great example! Here's a JSFiddle for experimenting: https://jsfiddle.net/josepi08/0nevk0a9/ |
This comment has been minimized.
This comment has been minimized.
New to Q and it's Promise API's, |
This comment has been minimized.
great example