如何将功能与延迟联系起来。我尝试了以下方法:
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;
}
所有功能似乎都是在彼此之后立即调用的。延迟功能不会延迟链。我错过了什么?
答案 0 :(得分:5)
使用没有参数的函数可能更容易发现错误:
正确的方式:
Promise.resolve().then(setFirstKeyframe)
上面,函数setFirstKeyframe
是.then
的参数,用于稍后调用的承诺。
错误的方式:
Promise.resolve().then(setFirstKeyframe())
这里,setFirstKeyframe
被立即调用(!),其结果(一个承诺)被传递给then
(由于then
期望一个函数而被忽略。)
对于带参数的函数,使用匿名函数:
Promise.resolve().then(function() {
return setFirstKeyframe('keyframe-0');
})
这是es6 arrow functions摇滚的地方:
Promise.resolve().then(() => setFirstKeyframe('keyframe-0'))
答案 1 :(得分:3)
.then()
接受一个函数,该函数可能会也可能不会返回一个承诺
然而,您正在直接传递承诺
// Yes
Promise.resolve().then(() => { return new Promise(); });
// No
Promise.resolve().then(new Promise());
答案 2 :(得分: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; }