Javascript 设置while循环中的超时

我的目标是创建一个simon游戏，我目前正在尝试更改每个div的颜色，如下所示：

我随机存储0到3个div类；游戏的每次迭代都会向数组中添加一个数字

var save =[];

我想在1秒和两秒的时间高亮显示div紫色，将其恢复到指定的css颜色，并重复此操作，直到它遍历所有保存数组类号

起初，我尝试这样做：

setTimeout(function(){ $("."+save[0]).css("background-color", "purple"); },1000)

setTimeout(function(){ $("."+save[0]).css("background-color", ""); },2000)

setTimeout(function(){ $("."+save[1]).css("background-color", "purple"); },3000)

setTimeout(function(){ $("."+save[1]).css("background-color", ""); },4000)

以此类推，我在simon游戏中添加了更多的迭代

我想这样做：

 var i = 0;
  function hello() {
      $("." + save[i]).css("background-color", "purple");
  }

  function goodbye() {
      $("." + save[i]).css("background-color", "");
  }

  var one = 1000;
  var two = 2000;


  while (i < save.length) {
      setTimeout(hello(), one);
      setTimeout(goodbye(), two);

      i++;

      one += 2000;
      two += 2000
  }

var i=0；
函数hello（）{
$（“+save[i]）.css（“背景色”、“紫色”）；
}
函数再见（）{
$（“+save[i]）.css（“背景色”）；
}
Var1=1000；
Var2=2000；
而（i

---

我研究了几个堆栈溢出问题，发现了类似的问题，但没有任何帮助。我可以想象youtube上有关于创建此游戏的视频，但我想自己尽可能多地了解，这只是一件让我挠头的事情。

基于您的代码和需求理解，我试图解决您的问题

$（文档）.ready（函数（）{
var changeColor=setInterval（函数（）{
var hasClassPurple=$（“.wrapper”）.hasClass（“紫色”）；
if（true==hasClassPurple）{$（“.wrapper”）.removeClass（“紫色”）.addClass（“白色”）；
}else{$（“.wrapper”）.removeClass（“白色”）.addClass（“紫色”）；
}
}, 1000);
//当您想要终止setInterval（）时，不要忘记添加clearInterval；
//透明间隔（变色）；
});
.purple{
背景颜色：紫色；
}
怀特先生{
背景色：白色；
}
.包装纸{
高度：150像素；
宽度：150px；
位置：绝对位置；
边框：1px实心#中交；
}
我使用递归、for循环和set间隔找到了答案。loopIt函数每两秒将颜色更改为紫色，loopIt2函数每两秒将颜色更改回其css指定的颜色，但在函数loopIt后1秒开始。循环在遍历数组长度后停止递归

var save = [".1", ".0", ".3", ".2", ".1"];   

var i = 0;

function loopIt(i) {

setTimeout(function(){ 

  $("."+save[i]).css("background-color", "purple");

  if(i < save.length - 1)  loopIt(i+1)}, 2000);
}

function loopIt2(i) {
  setTimeout(function(){

setTimeout(function(){ $("."+save[i]).css("background-color", ""); },1000)

  if(i < save.length - 1)  loopIt2(i+1)}, 2000);
}

var save=[“.1”、“.0”、“.3”、“.2”、“.1”]；
var i=0；
函数loopIt（i）{
setTimeout（函数（）{
$（“+save[i]）.css（“背景色”、“紫色”）；
if（i

这是最终的项目结果
您不能将带有参数的函数传递给setTimeout。将其包装到匿名函数中。请查看答案并让我知道它是否适用于您的？我删除了参数。我还试图将它包装成一个函数。还是不走运，这是我想做的一部分。但我真正想要的是有四个div，而不是一个div，并通过一个循环传递时间事件，以迭代一个数组，该数组由每个div的包装类组成。好的，2小时后，我将在计算机前，我会给你一个答案。你能用简单的雷曼风格解释我的特殊要求吗。@GeorgeSalamanca我有多框的更新代码，请看我的答案，作为你的问题代码，我理解并试图给出答案。