ES6承诺:如何使用参数链接函数

Question

如何将功能与延迟联系起来.我尝试了以下方法:

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;
}

所有功能似乎都是紧接着调用的.延迟功能不会延迟链.我错过了什么？

Answer 1

使用没有参数的函数可能更容易发现错误:

正确的方式:

Promise.resolve().then(setFirstKeyframe)

上面,该函数setFirstKeyframe是一个参数.then,以便稍后调用.

错误的方法:

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

这里,setFirstKeyframe立即调用(!),并将其结果(一个promise)传递给then(因为then需要一个函数而被忽略).

对于带参数的函数,请使用匿名函数:

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

这是es6箭头功能摇滚的地方:

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