javascript - 如何防止 Action 创建器中的 while 循环出现无限循环？

Question

尝试实现某种游戏循环，该循环将运行直到满足条件。

但是在测试过程中，我无法解决 while 循环不等待 Promise 解析的问题，而是一遍又一遍地调用它们，导致浏览器崩溃。

挂载组件时调用 CombatStart()

export const combatStart = () => {
    return function (dispatch, getState) {

        while (getState().mechanics.noOfEnemiesAttacked < 5) {
            let setTimeoutPromise = new Promise(resolve => {
                let success = true;
                setTimeout(function () { resolve(success) }, 3000);
            })

            setTimeoutPromise.then((resp) => {
                if(resp){
                    dispatch({
                        type: 'INCREMENT_ENEMIES_ATTACKED'
                    })
                }

            })
       }
    }
}

当我分派(dispatch)该操作时，“noOfEnemiesAttacked”会递增，当它达到 5 时，循环应该停止。所以它应该持续大约 15 秒。

代码在我添加 while 循环之前一直有效，否则它会按预期工作，在安装组件后 3 秒后增加值。

我怎样才能做到这一点？

递归不起作用，它不会循环，只会执行一次:

export const combatStart = () => {
    return function (dispatch, getState) {
        let setTimeoutPromise = new Promise(resolve => {
            let success = true;
            setTimeout(function () { resolve(success) }, 2000);
        })

        setTimeoutPromise.then((resp) => {
            if (resp) {
                dispatch({
                    type: 'INCREMENT_ENEMIES_ATTACKED'
                })
            }
            if (getState().mechanics.noOfEnemiesAttacked < 5) {
                console.log(getState().mechanics.noOfEnemiesAttacked)
                combatStart();
            }
        })

    }
}

Answer 1

将其包装在一个函数中，现在它应该可以工作了

export const combatStart = () => {
    return function (dispatch, getState) {
        function foo(){
            let setTimeoutPromise = new Promise(resolve => {
                let success = true;
                setTimeout(function () { resolve(success) }, 2000);
            })

            setTimeoutPromise.then((resp) => {
                if (resp) {
                    dispatch({
                        type: 'INCREMENT_ENEMIES_ATTACKED'
                    })
                }
                if (getState().mechanics.noOfEnemiesAttacked < 5) {
                    console.log(getState().mechanics.noOfEnemiesAttacked)
                    combatStart();
                    foo();
                }
            })
        }

        foo();
    }
}