How do we chain multiple promises that should happen one by one using jQuery?

Question

Is the following how we chain multiple promises in jQuery (1.8 and later)?

foo()
  .then(function() { return bar(); })
  .then(function() { return wah(); })   
  .then(function() { return lah(); })
  .then(function() { return haha(); });

where all foo(), bar(), wah(), lah(), haha() have to return a promise.

I think one note is that we have to use then() instead of done(), because if we use done(), then the second action to the last action will all be started after action 1 is done, instead of one by one.

---

An example: https://jsfiddle.net/jq9d3tw1/

changeStyle($("#message1"), { fontSize: "3em" }, 3000)
  .then(function() { return changeStyle($("#message2"), { marginLeft: "100px" }, 2000) })
  .then(function() { return changeStyle($("#message3"), { opacity: 0 }, 1000) });

where changeStyle() creates a deferred, gets the promise, performs some action and resolves the promise when done, and returns that promise:

function changeStyle(element, style, duration) {

  var d = new $.Deferred(),
      p = d.promise();

  element.animate(style, duration, function() {
    d.resolve();
  });

  return p;
}

Answer 1

This code can be even simpler if you are returning promise - you do not need to create anonimous function inside

changeStyle($("#message1"), { fontSize: "3em" }, 3000)
  .then(changeStyle($("#message2"), { marginLeft: "100px" }, 2000))
  .then(changeStyle($("#message3"), { opacity: 0 }, 1000));

https://jsfiddle.net/vadimb/jq9d3tw1/1/

Answer 2

For this particular use case, jQuery gives you functionality to do this type of thing out of the box using a queue. By default, the fx queue applies to animations, including built-in ones like fadeIn(), slideUp(), etc.

In this case, the done function triggers the effect on the next element once the current element's animation is complete.

var $message1 = $('#message1');
var $message2 = $('#message2');
var $message3 = $('#message3');
$message1.queue(function() {
    $(this).animate(
      { fontSize: "3em" }, 
      {
        duration: 3000, 
        done : function() { $message2.dequeue(); }
      }
    );
});
$message2.queue(function() {
    $(this).animate(
      { marginLeft: "100px" },
      {
        duration: 2000, 
        done : function() { $message3.dequeue(); }
      }
    );
});
$message3.queue(function() {
    $(this).animate({ opacity: 0 }, 1000);
});
$message1.dequeue(); // initiate the first effect

See my JSFiddle for an example

Answer 3

You can make the code a bit more concise by using .bind() for the then callback, and the .promise() method on the animated element:

changeStyle($("#message1"), { fontSize: "3em" }, 3000)
  .then(changeStyle.bind($, $("#message2"), { marginLeft: "100px" }, 2000))
  .then(changeStyle.bind($, $("#message3"), { opacity: 0 }, 1000));

function changeStyle(element, style, duration) {
  return element.animate(style, duration).promise();
}

body { font: 24px Arial, sans-serif; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message1">hello</div>
<div id="message2">hi</div>
<div id="message3">ha</div>