如何在动作创建者的while循环中防止无限循环？答案

【问题标题】：How do i prevent endless loop in while loop in action creator?如何在动作创建者的while循环中防止无限循环？
【发布时间】：2018-03-30 07:31:54
【问题描述】：

尝试实现某种游戏循环，直到满足条件为止。

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

在挂载组件时调用战斗启动()

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'
                    })
                }

            })
       }
    }
}

当我调度操作时，“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();
            }
        })

    }
}

【问题讨论】：

为什么在这里使用 Promise？使用它们与不使用它们有何不同？
Promise 异步解析。您不能在循环中等待它，因为异步代码在循环完成之前不会运行。
如果要运行异步循环，则需要递归编写。
尝试递归执行，但它并没有重新开始，更新主帖子

标签： javascript reactjs while-loop

【解决方案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();
    }
}

【讨论】：