如何在JS中不同时遍历数组中的每个对象？

Question

What i want to achieve: A function that iterates over an array and calls other functions one by one, waits until function is complete before calling another

Every time the function is called it should go back to the start of the array eg 1, 2, 3, 4 if 5 is added, it should call functions that start from 1 before reaching 5

Here is what i have tried after some searching:

function startFlash(num, value) {
console.log(num);
if (0 < num.length) {
    console.log('settimeup');
    setTimeout(function () {
        sequence.forEach(function (entry) {
            setTimeout(function () {
                if (entry == "red") {
                    flashRed();
                } else if (entry == "green") {
                    flashGreen();
                } else if (entry == "blue") {
                    flashBlue();
                } else if (entry == "yellow") {
                    flashYellow();
                }
            }, 1000)
        })
        num++;
        startFlash(num, value);
    }, 1000);
}

}

So startFlash is being called by a function which uses math.floor to generate a number between 1-4 and depending on the number, adds the color, red/blue/yellow/green to the array sequence

Now the code above calls all method at the same time which is not what i want.

Heres something else i've tried after doing more searches:

if (sequence[sequence.length -1] == "red") {
            flashRed();
         } else if (sequence[sequence.length -1] == "green") {
            flashGreen();           
         } else if (sequence[sequence.length -1] == "blue") {
            flashBlue();
         } else if (sequence[sequence.length -1] == "yellow") {
            flashYellow();          
         }

Now this code above only calls the latest value in the array like it suggests, but i need it to start from the first value in the array

Any help?

Answer 1

Consider using Promises

let chain = Promise.resolve();
sequence.forEach(entry=>{
    chain = chain.then(()=>{
        if (entry == "red") flashRed()
        // ... etc
    })
})