停止执行循环，直到功能完成

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

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

无法等待您的 Article.getInitialProps = async function(context) => { const res = await getBlog(`${context.query.id}`); const json = await res.json(); console.log(json); return { blog: json }; }; 方法。您是否尝试过

displayBlocks

Answer 2

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

这个想法是，如果您想让div逐1更改颜色，然后也逐一添加类，请在计算中跟踪时间。参见下面的伪代码，

ListFooterComponent

如果可以完美地实现它，它应该可以按照您的期望工作。只需尝试一下就可以了。

您可以做到。干杯：）