停止执行循环，直到函数完成

Question

我正在尝试在 React 中构建一个简单的游戏，我需要制作一个动画，其中一组块将其颜色更改为橙​​色，持续 1 秒，然后变回白色。这个操作需要一个一个的进行。

这是我的带有 div 数组的游戏：

假设数组是 [1,3,5,6] 我想循环遍历该数组并向每个 div 添加一个带有 bg 颜色的类一秒钟，然后将其删除

我尝试了很多东西，但我能得到的结果是所有 div 都同时改变颜色，而不是一个一个地改变

这是我的代码，它的功能是按“next lvl”和另一个异步功能开始的

const displayBlocks = async (key) => {  
    let promise = new Promise((res,rej) => {
        setTimeout(() => {
                divArray.classList.remove('active');
                res('color removed');
            }, 500)
        });
        console.log(key);
        ref.current.childNodes[key].classList.add('active'); 
        let result = await promise;     
        return result;          
}

const handleNewGame = () => {
    blockArray = []
    // generate array with random cells according to points
    for (let i = 0;i< props.points;i++) {
        let key = Math.floor(Math.random() * (props.board.length)) + 0;
        displayBlocks(key).then((res) => {
            console.log(res);
            blockArray.push(key);
        })                   
    }
    console.log(blockArray);
}

我尝试了许多异步或不异步的解决方案，但都没有奏效。你能告诉我如何在 displayBlock 函数完成之前停止循环的执行吗？

Answer 1

注意：暂时无法测试，可能会遇到同样的问题

您的displayBlocks 方法不可等待。你有没有尝试过类似的东西

const displayBlocks = async (key) => {  
                return new Promise((res,rej) => { // return with promise to make it awaitable
                    setTimeout(() => {
                            divArray.classList.remove('active');
                            res('color removed');
                        }, 500)
                    });
                    console.log(key);
                    ref.current.childNodes[key].classList.add('active'); 
                    let result = await promise;     
                    return result;          

    }


    const handleNewGame = () => {
        blockArray = []
        // generate array with random cells according to points
        for (let i = 0;i< props.points;i++) {
            let key = Math.floor(Math.random() * (props.board.length)) + 0;
            var res = await displayBlocks(key); // await should halt the loop
            console.log(res);
            blockArray.push(key);                               
        }
        console.log(blockArray);
    }

Answer 2

如果您在某些在线代码编辑器中分享完整的工作代码，我可以修复它，但现在，我将分享一些您可以转换为真实代码的伪代码。

这个想法是，如果你想让你的 div 一个一个地改变颜色，那么也一个一个地添加类，在你的计算中跟踪时间。见下面的伪代码，

function displayBlock (index) {
    let duration = 1000
    let waitTime = index * duration
    let thisDiv = divArray[index]

    // Now wait for waitTime amount of time before adding the OrangeClass
    setTimeout(() => {
        thisDiv.addClass('OrangeClass')

         //Now from this point, wait for another 1 sec and remove the OrangeClass
         setTimeout(() => {
             thisDiv.removeCLass('OrangeClass')
         }, duration)

    }, waitTime)

}

如果你能完美地实现它，它应该可以按照你的期望工作。只是做一些试验和错误。

你可以做到。干杯:)