2017-03-14 9 views
4

以下は、長さをとり、setTimeoutを使用してデクリメントする単純な再帰関数です。長さが<= 0になると、完了です。私は同じように使用できるように、私は(純粋なJavaScriptで)この関数を書くことができますどのようにこの再帰関数を宣言する方法

animate(999).then(...)

​​

更新:

これが私が試したことです。私が抱えている問題は、resolveが呼び出されていないか、別の約束で呼ばれているようです。

const animate = length => { 
 
    return new Promise((resolve, reject) => { 
 
    console.log(length) 
 
    length -= 10 
 
    if (length <= 0) { 
 
     length = 0 
 
     resolve(true) 
 
     return // without this the function runs forever 
 
    } 
 
    setTimeout(() => {animate(length)}, 10) 
 
    }) 
 
} 
 

 
animate(999).then(result => console.log(result))

**ワーキング更新(が、それを理解していない)**

const animate = length => { 
 
    return new Promise((resolve, reject) => { 
 
    console.log(length) 
 
    length -= 10 
 
    if (length <= 0) { 
 
     length = 0 
 
     return resolve(true) 
 
    } 
 
    setTimeout(() => {resolve(animate(length))}, 10) 
 
    }) 
 
} 
 

 
animate(999).then(result => console.log(result))

答えて

4

setTimeout(() => {animate(length)}, 10)が動作しません、これはこれは何あなたの「作業アップデート」の修正である(再びanimate関数を呼び出しますが、最も外側の呼び出しで作成された約束を解決することはありませんかもしれない - それは再帰呼び出しからの約束で、外側の約束を解決し、それによって同じ結果が達成されます)。

代わりsetTimeout、あなたが使用していることpromisify非同期プリミティブ、多くのコールバックをいじりの:その後、

function wait(t) { 
    return new Promise(resolve => { 
     setTimeout(resolve, t); 
    }); 
} 

とアニメーション機能で常に約束返すようにすることを使用します。

const animate = length => { 
    console.log(length) 
    length -= 10 
    if (length <= 0) { 
    length = 0 
    return Promise.resolve() 
    } 
    return wait(10).then(() => { 
    return animate(length) 
    }) 
} 
2

新しいPromise、その結果、そのresolverejectです毎回生成されるすべてsetTimeout関数呼び出しで新しいPromiseを返し、最新のもの(if (length <= 0)のもの)のみを解決しています。

機能の上にPromise((resolve, reject)を配置していれば、うまくいきました。

どちらかまたはあなたがresolve, rejectを持っています。

2

ちょうど楽しみのために、これを行うことができます。あなたではありません。コードは維持できないものです。

const animate = (length, resolve) => { 
 
    var promise; 
 
    
 
    if (!resolve) { 
 
    promise = new Promise((newResolve) => { 
 
     resolve = newResolve; 
 
    }); 
 
    } 
 
    
 
    console.log(length); 
 
    length -= 10; 
 
    
 
    if (length <= 0) { 
 
    length = 0; 
 
    resolve(true); 
 
    return promise; 
 
    } 
 
    
 
    setTimeout(() => {animate(length, resolve)}, 10); 
 
    
 
    return promise; 
 
} 
 

 
animate(999).then(result => console.log(result))

1

これはasync/awaitための優れた仕事である:

let wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
 

 
const animate = async length => { 
 
    for (; length > 0; length -= 10) { 
 
    console.log(length); 
 
    await wait(10); 
 
    } 
 
    return 0; 
 
} 
 

 
animate(999).then(() => console.log("Done!"));