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

.then()はかないことがありますが、しかし、あなたはすべての関数を呼び出す代わりに、ハンドラとしてそれらを提供したためです直接

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

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

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

Answer 3

あなたの間違いは、引数なしの関数を発見する方が簡単かもしれません：

正しい方法：

上記

Promise.resolve().then(setFirstKeyframe) 

を、機能setFirstKeyframeは引数であります.then、後で電話するという約束です。

間違った方法：（！）ここで

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

、setFirstKeyframeがすぐに呼び出され、その結果（約束を）（then機能を期待しても無視されますする）thenに渡されます。あなたはthen` `への約束を返すコールバックを渡す必要が

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