Reputation: 12813
Is there a way to chain JQuery Deferreds to execute one after another without callback pyramids?
Right now I have to do something like this:
$.Deferred(function(dfd) {
setTimeout(function() {
console.log('Foo');
dfd.resolve();
}, 1000);
})
.done(function() {
$.Deferred(function(dfd) {
console.log('Bar');
dfd.resolve();
}).done(function() {
console.log('done');
});
});
Output: Foo, Bar, done
I want to be able to do something like this:
$.Deferred(function(dfd) {
setTimeout(function() {
console.log('Foo');
dfd.resolve();
}, 1000);
})
.then($.Deferred(function(dfd) {
console.log('Bar');
dfd.resolve();
}))
.done(function() { console.log('done') });
Undesired Output: Bar, Foo, done
Thanks.
Upvotes: 3
Views: 401
Reputation: 5428
I think you want to use $.when().
Something like this should work:
var d1 = $.Deferred(function(dfd) {
setTimeout(function() {
console.log('Foo');
dfd.resolve();
}, 1000);
});
var d2 = $.Deferred(function(dfd) {
setTimeout(function() {
console.log('Bar');
dfd.resolve();
}, 2000);
});
$.when(d1, d2).then(function() {console.log('done')});
Upvotes: 0
Reputation: 7898
The issue with your code is you are passing .then()
a jQuery object whereas it expects a function
. This code executes foo-bar-done as required.
$.Deferred(function(dfd) {
setTimeout(function() {
console.log('Foo');
dfd.resolve();
}, 1000);
}).then(function(){
return $.Deferred(function(dfd) {
console.log('Bar');
dfd.resolve();
});
}).done(function() { console.log('done') });
Upvotes: 1