How do I chain a sequence of deferred functions in jQuery 1.8.x?

asynchronous, javascript, jquery-deferred

Solution

It's not that complicated (either use `.then` or `.pipe`, they are both the same since jQuery 1.8 I think).

func1().then(func2).done(function(message) {
    alert(message);
});

Since `func2` returns a new deferred object, the `.done` callback is attached to that one instead.

DEMO

Problem

Given these functions: ``` function func1() { var dfd = $.Deferred(); setTimeout(function() { dfd.resolve('Password'); }, 1000); return dfd.promise(); } function func2(message) { var dfd = $.Deferred(); setTimeout(function() { if (message == 'Password') { dfd.resolve('Hello World'); } }, 1000); return dfd.promise(); } ``` I'd like to find a better way to do the following. Note this is using jQuery 1.8.x. ``` var promise = func1(); promise.done(function(message1) { var promise2 = func2(message1); promise2.done(function(message2) { alert(message2); }); }); ``` Any ideas? I thought using jQuery #pipe or #then would work but I can't figure it out. Here is a fiddle to play around: http://jsfiddle.net/Z7prn/

Original source