Javascript 两个设定间隔不按顺序激活，并在不同时间触发

我试图在simonGame中实现闪烁效果，我使用了这些函数将颜色css更改为高亮显示的颜色，然后恢复正常，它们从数组中获取随机序列并更改数组中的颜色：

game.computerMoves = [green, blue, blue, blue, red, red, yellow];

function showMoves () {

  let i = -1;

  const start = setInterval(function(){
  if(i >= 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);
 }, 1000);
}

//revert the colors that were changed in showMoves
function removeMoves() {
  let c = -1;
  //put at 2 seconds to change after showMoves is done
  const computerStop = setInterval(function(){

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

  if(c >= game.computerMoves.length-1){
     clearInterval(computerStop);

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

  c++;

  let move = game.computerMoves[c];

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

此函数将启动这两个选项：

function startFlashing(){
  showMoves();
  removeMoves();
 }

---

我将removeMoves设置为每2秒启动一次，这样它可以在showMoves在1秒完成后激活，以创建闪烁效果，但showMoves首先会创建闪烁效果，但是showMoves的发射速度比removeMoves快几倍，而不是一个接一个地发射，showMoves在showMoves已经在阵列中循环后发射几次。我将非常感谢您的帮助

您可以将其组合为一个计时器，该计时器每秒启动一次，然后相应地切换状态。见下文：

const green='green'；
常量蓝色=‘蓝色’；
常量红色=‘红色’；
常量黄色=‘黄色’；
康斯特博弈={
计算机移动：[绿，蓝，蓝，蓝，红，红]，
};
常量move=document.getElementById（'move'）；
const showColors=新地图([
[绿色，'石灰']，
[黄色，'rgb（255255102）'，
[蓝色，“道奇蓝”]，
[红色，“鲑鱼”]，
]);
const hideColors=新地图([
[绿色，'绿色']，
[黄色，'黄色']，
[红色，'红色']，
[蓝色，'蓝色']，
]);
常量startFlashing=（）=>{
设i=-1；
让可见=真实；
常量间隔=设置间隔（（）=>{
如果（可见）{
i+=1；
}
如果（i>=game.computerMoves.length）{
间隔时间；
返回；
}
可见=！可见；
颜色映射器=可见？显示颜色：隐藏颜色；
const turn=game.computerMoves[i]；
const color=colorMapper.get（回合）；
log（`visible:${visible}，color:${turn}`）；
move.style.backgroundColor=颜色；
}, 1000);
}
startFlashing（）
#移动{
宽度：100px；
高度：100px；
边框：2件纯黑；
}
我认为通过这种方式，您可以使用
设置超时
来实现第二个条件，它将从第一个条件调用（
设置间隔
）

您可以在其他函数中分离
setTimeout
代码，但需要声明
c
变量全局。
在
游戏中什么是
绿色
等。计算机移动
？这些变量是在哪里定义的？颜色：[greenBox=document.getElementById（'green'）、blueBox=document.getElementById（'blue'）、yellowBox=document.getElementById（'yellow'）、redBox=document.getElementById（'red'）]}抱歉，我不知道如何在注释中缩进代码，但它们表示要更改颜色的div的id，并且在那里定义^
game.computerMoves = [green, blue, blue, blue, red, red, yellow];


function showMoves() {

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

    const start = setInterval(function() {
        if (i >= 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 computerStop = setTimeout(function() {

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

            if (c >= game.computerMoves.length - 1) {
                clearInterval(computerStop);

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

            c++;

            let move = game.computerMoves[c];

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