ES6 承诺：如何用参数链接函数答案

【问题标题】：ES6 promises: how to chain functions with argumentsES6 承诺：如何用参数链接函数
【发布时间】：2016-08-06 06:53:37
【问题描述】：

如何用延迟链接函数。我尝试了以下方法：

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

所有函数似乎都被立即调用。延迟功能不会延迟链。我错过了什么？

【问题讨论】：

你必须将一个回调函数返回到then，而不是一个promise本身。
您将立即开始所有操作

标签： javascript promise ecmascript-6 es6-promise

【解决方案1】：

.then() 接受一个函数，该函数可能返回也可能不返回一个承诺

但是你直接传递了一个承诺

// Yes
Promise.resolve().then(() => { return new Promise(); });

// No
Promise.resolve().then(new Promise());

【讨论】：

对不起。我不明白你的回答。您是在谈论 delay() 函数吗？ “传递返回承诺的函数”和“直接传递承诺”有什么区别？
@Sven，不，他们两个。看我的回答。
这两者的区别... Promise.resolve().then(new Promise()); Promise.resolve().then(() => { return new Promise(); });

【解决方案2】：

这是因为您调用了所有函数，而不是将它们作为处理程序提供。

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

function delay(ms, value) {
  return function (val) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, value !== undefined ? value : val);
    });
  };
}

function setKeyframe(name) {
  var element = document.body;
  element.className = 'animation-container ' + name;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.keyframe-0 { background: red; }
.keyframe-1 { background: green; }
.keyframe-2 { background: blue; }

【讨论】：

最好将其重命名为 makeDelayer 左右，以明确它不会立即造成延迟。

【解决方案3】：

使用不带参数的函数可能更容易发现您的错误：

正确的方法：

Promise.resolve().then(setFirstKeyframe)

上面，函数setFirstKeyframe 是.then 的一个参数，用于稍后调用的promise。

错误的方式：

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

这里，setFirstKeyframe 被立即调用 (!)，其结果（承诺）被传递给 then（它被忽略，因为 then 需要一个函数）。

对于带参数的函数，使用匿名函数：

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

这是es6 arrow functions摇滚的地方：

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

【讨论】：