Javascript 使用承诺设置超时问题（react+redux）_Javascript_Reactjs_Promise

Javascript 使用承诺设置超时问题（react+redux）

javascript reactjs

Javascript 使用承诺设置超时问题（react+redux）,javascript,reactjs,promise,Javascript,Reactjs,Promise,我正在为我的测试乐趣项目设计一些机制，因为我知道我需要推迟很多事情，我想我需要承诺然而，事实证明它并不像我想象的那样有效。虽然目前这对我来说不是一个问题，但我知道以后我将不得不解决这个问题代码如下： if(nextProps.mechanics.turn === 'enemy'){ let enemyTurnPromise = new Promise((resolve, reject) =>{ let i = 0;

我正在为我的测试乐趣项目设计一些机制，因为我知道我需要推迟很多事情，我想我需要承诺

然而，事实证明它并不像我想象的那样有效。虽然目前这对我来说不是一个问题，但我知道以后我将不得不解决这个问题

代码如下：

if(nextProps.mechanics.turn === 'enemy'){
            let enemyTurnPromise = new Promise((resolve, reject) =>{
                let i = 0;
                _.forEach(this.props.enemies, (enemy, index) =>{
                    setTimeout(this.handleEnemyAttack, 1000 * index)
                    i++;
                })
                resolve(i)
            })
            enemyTurnPromise.then(r =>{
                console.log('test', r);
                this.props.switchTurn('ally')

            })

        }

目前我将状态切换到敌方，它立即切换回盟友并打印I值，而setTimeout仍在缓慢解决中

有没有什么优雅的方法可以解决这个问题，而不需要一些奇怪的回调块？可以异步/等待帮助吗？或者某个库可以消除许多不必要的代码？

主要问题是您解决得太早了。在所有超时完成之前，您不想解决

最简单的方法是从启用承诺的setTimeout开始，如下所示：

const setTimeoutPromise = delay => new Promise(resolve => {
    setTimeout(resolve, delay);
});

然后，暂时使用promise语法，假设this.props.friends是一个数组，您可以使用map为每个敌人创建一个promise，并使用promise.all等待所有这些操作完成：

if(nextProps.mechanics.turn === 'enemy') {
    Promise.all(this.props.enemies.map((enemy, index) =>
        setTimeoutPromise(1000 * index).then(() => this.handleEnemyAttack(enemy))
    )).then(r => {
        console.log('test', /*...not sure what `r` is meant to be here... */);
        this.props.switchTurn('ally')
    })
}

另一种选择是使用reduce，并持续延迟，等待每个敌人的攻击在下一次攻击之前完成：

if(nextProps.mechanics.turn === 'enemy') {
    this.props.enemies.reduce((p, enemy) =>
        p.then(() => setTimeoutPromise(1000)).then(this.handleEnemyAttack(enemy))
    , Promise.resolve())
    .then(r => {
        console.log('test', /*...not sure what `r` is meant to be here... */);
        this.props.switchTurn('ally')
    })
}

可以异步/等待帮助吗

是的，重要时刻：

if(nextProps.mechanics.turn === 'enemy') {
    (async () => {
        for (const enemy of this.props.enemies) {
            await setTimeoutPromise(1000);
            this.handleEnemyAttack(enemy);
        }
        console.log('test', /*not sure what r is meant to be here*/);
        this.props.switchTurn('ally')
    }).catch(e => {
        // Handle error
    });
}

如果上面的If已经在异步函数中，我们可以删除该位：

if(nextProps.mechanics.turn === 'enemy') {
    for (const enemy of this.props.enemies) {
        await setTimeoutPromise(1000);
        this.handleEnemyAttack(enemy);
    }
    console.log('test', /*not sure what r is meant to be here*/);
    this.props.switchTurn('ally')
}

主要问题是你解决得太早了。在所有超时完成之前，您不想解决