javascript - ES6 promises: how to chain functions with arguments

Question

How to chain functions with delays. I tried the following:

Promise.resolve()
.then(setKeyframe('keyframe-0'))
.then(delay(3000))
.then(setKeyframe('keyframe-1'))
.then(delay(3000))
.then(setKeyframe('keyframe-2'))
;

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

function setKeyframe (name) {
  var element = document.getElementsByClassName('animation-container')[0];
  element.className = 'animation-container ' + name;
}

All functions seem to be called immediately after each other. The delay function does not delay the chain. What am I missing?

Answer 1

Your mistake might be easier to spot with a function without arguments:

The right way:

Promise.resolve().then(setFirstKeyframe)

Above, the function setFirstKeyframe is an argument to .then, for the promise to call later.

The wrong way:

Promise.resolve().then(setFirstKeyframe())

Here, setFirstKeyframe is called immediately (!), and its result (a promise) is passed to then (which gets ignored as then expects a function).

For functions with arguments use an anonymous function:

Promise.resolve().then(function() {
  return setFirstKeyframe('keyframe-0');
})

This is where es6 arrow functions rock:

Promise.resolve().then(() => setFirstKeyframe('keyframe-0'))