尝试构建FCC的Simon游戏并遇到问题。 CPU正在根据Math.random函数构建一个随机数组，然后应该添加＆＃39; active＆＃39;临时到该随机数索引处的范围（可能是半秒），然后移除它，然后移动到下一个直到i = randomArray.length，这样玩家就可以看到他们需要按哪些按钮来击败水平。
如果你运行附加的代码，你会发现第一级工作正常。然而，在此之后的每个级别，所有随机选择的按钮都具有“活动”按钮。同时添加和删除类，当我需要它同时发生一个中断之间。在控制台上注意第一个for循环运行直到它完成，然后它进入第二个循环。我已尝试以多种方式重构代码以使其在第一个循环和第二个循环之间反弹，但似乎无法正常工作。
以下是我找到的更好答案之一的链接，但它并没有帮助我在for循环中创建延迟，并且它没有解决第一个问题for循环运行完成，然后转到第二个for循环。
jQuery AddClass then removing a class
欢迎任何/所有建议。希望我的格式是可以接受的。这是我关于stackoverflow的第一篇文章，所以请原谅任何错误。
var level = 0;
var currentLevel;
var random = Math.floor(Math.random() * 4);
var randomArray = [];
var userArray = [];
$('#btn-reset').hide();
$('#btn-next').hide();
$('#btn-start').off('click').on('click', init);
function init() {
$('#btn-start').off('click');
$('#btn-start').fadeOut(250);
$('#btn-next').delay(250).fadeIn(250);
$('#btn-reset').fadeIn(250);
simonSays()
};
$('#btn-next').off('click').on('click', simonSays);
function simonSays() {
if(level <= 20) {
level++;
$('.counter').html(level);
}
var lameAttempt = setInterval(function() {
random = Math.floor(Math.random() * 4);
randomArray.push(random);
console.log("randomArray = " + randomArray);
for(var i = 0; i < randomArray.length && i <= 20; i++) {
console.log("1st for Loop Running " + i);
$('span').eq(randomArray[i]).addClass('active');
setTimeout(function() {
for(var j = 0; j < randomArray.length; j++) {
console.log("2nd for Loop Running " + j);
$('span').eq(randomArray[j]).removeClass('active');
console.log("Class removed?");
}
},1000); // end setTimeout
} // end for loop
//////////////////////////////////////////////////////////
///////// ^^^ ABOVE LOGIC NEEDS MAJOR FIXING ^^^ /////////
//////////////////////////////////////////////////////////
clearInterval(lameAttempt);
console.log("interval cleared");
}, 0); // end setInterval
$('#btn-next').off('click').on('click', simonSays);
} // end entire function
$('#btn-reset').on('click', reset);
function reset() {
var randomArray = [];
var userArray = [];
level = 0;
for(var i = 0; i < $('span').length - 1; i++) {
$('span').eq(i).removeClass('active');
}
$('.counter').html(level);
$('#btn-next').fadeOut(300);
$('#btn-start').delay(300).fadeIn(300);
$('#btn-reset').fadeOut(300);
$('#btn-start').off('click').on('click', init);
};
function endGame() {
console.log("Game Over");
}body {
font-family: "Roboto Mono";
}
.border {
height: 500px;
width: 500px;
border-radius: 50%;
margin: 40px auto;
position: relative;
background: #232323;
}
.u-l {
position: absolute;
height: 225px;
width: 225px;
border:1px solid black;
background: green;
top: 18.75px;
left: 18.75px;
border-top-left-radius:100%;
text-indent: -9999px;
}
.u-r {
position: absolute;
height: 225px;
width: 225px;
border:1px solid black;
right: 18.75px;
top: 18.75px;
background: red;
border-top-right-radius:100%;
text-indent: -9999px;
}
.b-r {
position: absolute;
height: 225px;
width: 225px;
border:1px solid black;
bottom: 18.75px;
right: 18.75px;
background: blue;
border-bottom-right-radius:100%;
text-indent: -9999px;
}
.b-l {
display: inline;
position: absolute;
height: 225px;
width: 225px;
border:1px solid black;
bottom: 18.75px;
left: 18.75px;
background: yellow;
border-bottom-left-radius:100%;
text-indent: -9999px;
}
.inactive {
opacity: .7;
}
span:active {
opacity: 1;
}
.active {
opacity: 1;
}
.inner-circle {
height: 40%;
width: 40%;
position: absolute;
border-radius: 50%;
top: 30%;
left: 30%;
background: #161616;
}
.simon {
font-size: 50px;
color: white;
width: 50%;
margin: 30px 20px 0 20px;
}
div.level {
font-size: 22px;
color: crimson;
width: 80%;
margin: 0px 45px;
font-weight: 700;
}
.counter {
font-size: 26px;
}
p {
display: inline;
}
div.reset {
text-align: center;
}
#btn-start {
border: 1px solid white;
border-radius: 10px;
font-family: "Roboto Mono";
font-weight: 700;
font-size: 22px;
background: transparent;
color: white;
outline: none;
margin: 10px 52px 0 52px;
}
#btn-start:hover {
color: silver;
transition-duration: .4s;
}
#btn-reset {
border: 1px solid black;
border-radius: 10px;
font-family: "Roboto Mono";
font-weight: 700;
font-size: 22px;
background: transparent;
color: black;
outline: none;
width: 25%;
margin: 10px 52px 0 52px;
}
#btn-reset:hover {
border: 1px solid silver;
transition-duration: .3s;
}
#btn-start:hover {
color: silver;
transition-duration: .4s;
}
#btn-next {
border: 1px solid white;
border-radius: 10px;
font-family: "Roboto Mono";
font-weight: 700;
font-size: 22px;
background: transparent;
color: white;
outline: none;
text-align: center;
margin: 10px 63px 0 63px;
}
#btn-next:hover {
border: 1px solid silver;
color: silver;
transition-duration: .3s;
}
.btn-color {
border: none;
}
.btn-color:hover {
cursor: pointer;
border: none;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
</head>
<div class="container">
<div class="border">
<span class="u-l btn-color inactive">0</span>
<span class="u-r btn-color inactive">1</span>
<span class="b-r btn-color inactive">2</span>
<span class="b-l btn-color inactive">3</span>
<div class="inner-circle">
<div class="simon">
<p>SIMON</p>
</div>
<div class="level">
<p>Level: </p><span class="counter">0</span>
</div>
<div class="start">
<button id="btn-start">Start!</button>
<button id="btn-next">Next</button>
</div>
</div>
</div>
<div class="reset">
<button id="btn-reset">Reset</button>
</div>
</div>