прекратить выполнение l oop до завершения функции

Question

Я пытаюсь построить простую игру в React, и мне нужно сделать анимацию, в которой набор блоков меняет свой цвет на оранжевый в течение 1 секунды c и go обратно на белый. Эта операция должна выполняться один за другим.

Вот моя игра с массивом элементов div:

И скажем, массив [1,3,5,6] Я хочу провести l oop через этот массив и добавить класс с цветом bg в каждый div на секунду, а затем удалить его

Я пробовал много вещей, но закрыть Я могу понять, что все div изменяют свой цвет в одно и то же время, а не один за другим

Это мой код с функцией, которая запускается нажатием "next lvl" и другой asyn c function

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

Я пробовал много решений с asyn c или без, но ни одно из них не работало. Можете ли вы сказать мне, как я могу остановить выполнение l oop, пока функции 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

Если вы поделитесь полным рабочим кодом в каком-то онлайн-редакторе кода, я могу это исправить, но сейчас я поделюсь некоторым псевдокодом, который вы можете преобразовать в реальный код.

Идея в том, что если вы хотите, чтобы ваши дивы изменили цвет 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)

}

Если вы можете идеально реализовать его, он должен работать в соответствии с вашими ожиданиями. Просто сделайте несколько проб и ошибок.

Вы можете сделать это. Ура:)