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

Question

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/

Answer 1

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