Two setIntervals activating in a sequence to change CSS I'm making a Simon game and I made this function to show flashing lights:

 //a random array representing html divs to change colors
 game.computerMoves = [green, red, blue, red, green, green , yellow];

function showMoves() {

let i = -1;
let c = -1;

const start = setInterval(function() {
    if (i &gt;= game.computerMoves.length - 1) {
        clearInterval(start);
    }

    console.log(i + 'start ' + game.computerMoves.length);

    const showColors = new Map([
        [green, 'lime'],
        [yellow, 'rgb(255,255,102)'],
        [blue, 'dodgerblue'],
        [red, 'salmon'],
    ]);

    i++;

    let move = game.computerMoves[i];

    move.style.backgroundColor = showColors.get(move);
    //revert the colors that were changed in showMoves
    //put at 2 seconds to change after showMoves is done
    const stop = setTimeout(function() {

        console.log(c + 'stop ' + game.computerMoves.length);

        if (c &gt;= game.computerMoves.length - 1) {
            clearInterval(stop);

        }
        const colorKey = new Map([
            [green, 'green'],
            [yellow, 'rgb(204,204,0)'],
            [red, 'red'],
            [blue, 'blue']
        ]);

        c++;

        let move = game.computerMoves[c];

        move.style.backgroundColor = colorKey.get(move);
    }, 1000);
  }, 2000);
}


I'm not sure if this is good code or not but it works how I want it to and I would appreciate any feedback.

edit- here is my html and css, its not done though https://codepen.io/icewizard/pen/JLBpNQ
What is the game object for? I assume it's for keeping all game states together, which is good, but I can't tell from this example.

let i = -1;
let c = -1;


It's a bit strange to start an index at -1. The names also tells me nothing about what these are. This also makes it hard to follow the exact flow of the code.

const showColors = new Map ...


You are creating a new map for every loop (same with colorKey). These should be declared once, at the start of your program. You could use the game object for this.

if (i &gt;= game.computerMoves.length - 1) {
    clearInterval(start);
}


You are stopping the interval from future calls, but not the current function you are in, which gives an error, since the index is out of bound. Add a return to stop it.

clearInterval(stop);


When the timeout is done, you are clearing the same timeout, which is already done, so this does nothing. You can get rid of it.

You can make a function to turn on or off a light. You can then pass this directly to your timeout. This also gets rid of c.

function setLight(color, isOn) {
    color.style.backgroundColor = isOn ? game.showColors.get(color) : game.colorKey.get(color);
}


The full code then looks like this. I had to make up some HTML, CSS and a few lines of JS to initialize some things, since you didn't include it.



const red = document.getElementById('red');
const green = document.getElementById('green');
const yellow = document.getElementById('yellow');
const blue = document.getElementById('blue'); 
let game = {};

game.showColors = new Map([
    [green, 'lime'],
    [yellow, 'rgb(255,255,102)'],
    [blue, 'dodgerblue'],
    [red, 'salmon'],
]);
game.colorKey = new Map([
    [green, 'green'],
    [yellow, 'rgb(204,204,0)'],
    [blue, 'blue'],
    [red, 'red']
]);

//a random array representing html divs to change colors
game.computerMoves = [green, red, blue, red, green, green , yellow];

showMoves();

function showMoves() {
    let i = 0;

    const start = setInterval(function() {
        if (i &gt;= game.computerMoves.length) {
            clearInterval(start);
            return;
        }

        const move = game.computerMoves[i];
        setLight(move, true);
        setTimeout(setLight.bind(null, move, false), 1000); //Using bind to preset arguments
        
        i++;
    }, 2000);
}

function setLight(color, isOn) {
    color.style.backgroundColor = isOn ? game.showColors.get(color) : game.colorKey.get(color);
}
div {
    width: 50px;
    height: 50px;
    display: inline-block;
}
#red {background-color: red;}
#green {background-color: green;}
#yellow {background-color: rgb(204,204,0);}
#blue {background-color: blue;}
&lt;div id="red"&gt;&lt;/div&gt;
&lt;div id="green"&gt;&lt;/div&gt;
&lt;div id="yellow"&gt;&lt;/div&gt;
&lt;div id="blue"&gt;&lt;/div&gt;