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

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

以下是我的一系列div游戏：

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

我尝试了很多方法，但最后我发现所有的div都会在同一时间改变颜色，而不是一个接一个

这是我的代码，其中一个函数是通过按下“next lvl”和另一个异步函数启动的

constdisplayblocks=async（key）=>{
让承诺=新承诺（（res，rej）=>{
设置超时（（）=>{
divArray.classList.remove（'active'）；
res（“去除颜色”）；
}, 500)
});
控制台日志（键）；
ref.current.childNodes[key].classList.add（'active'）；
让结果=等待承诺；
返回结果；
}
常量handleNewGame=（）=>{
块数组=[]
//根据点生成具有随机单元的数组
for（设i=0；i{
控制台日志（res）；
块数组。按（键）；
})                   
}
console.log（blockArray）；
}

---

我尝试了很多有异步或无异步的解决方案，但都没有成功。您能告诉我在displayBlock函数完成之前如何停止循环的执行吗

注意：目前无法测试，可能会遇到相同的问题

您的

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

constdisplayblocks=async（key）=>{
返回新的承诺（（res，rej）=>{//返回并承诺使其成为可等待的
设置超时（（）=>{
divArray.classList.remove（'active'）；
res（“去除颜色”）；
}, 500)
});
控制台日志（键）；
ref.current.childNodes[key].classList.add（'active'）；
让结果=等待承诺；
返回结果；
}
常量handleNewGame=（）=>{
块数组=[]
//根据点生成具有随机单元的数组
for（设i=0；i

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

这个想法是，如果你想让你的div改变颜色1乘1，然后一个接一个地添加类，在你的计算中记录时间。请参见下面的伪代码

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)

}

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

---

你能做到。干杯：）

哇，真有效。我以前尝试过这个解决方案，但我不得不把事情搞砸，因为它没有按预期工作。但是这个解决方案的问题是每次启动下一个块时的延迟都不同，可能是因为waitTime变量，但我知道它必须存在，以便te set timeout工作。有什么解决方法吗？我已将固定的1000毫秒更改为一个名为“duration”的变量。我不明白为什么会出现“每次延迟都不一样”的情况，因为有了这段代码，索引0块将立即变亮，然后在1秒后它将关闭，索引1 div将变亮，依此类推。因此，每过1秒，上一个div就会关闭，下一个div就会打开。这是我在这里的第一篇帖子，谢谢你的帮助：）如果它真的很有用，你能把它标记为选中，或者至少对我的答案进行投票吗？这将大大有助于这项工作。感谢并欢迎使用StackOverflow:）我不得不将所有代码放入返回的承诺中，但它成功了！非常感谢你的帮助