while循环

Question

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

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

var save =[];

我希望在一秒钟内突出显示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
  }

我经历了几个堆栈溢出问题，发现了类似的问题，但没有任何帮助。我可以想象有关于创建这个游戏的youtube视频，但我想尽可能多地弄清楚，这只是让我摸不着头脑的一件事。

Answer 1

根据您的代码和要求理解，我试图解决您的问题。

$(document).ready(function() {
  var changeColor = setInterval(function() {
    var hasClassPurple = $(".wrapper").hasClass("purple");
    if (true === hasClassPurple) {      $(".wrapper").removeClass("purple").addClass("white");
    } else {      $(".wrapper").removeClass("white").addClass("purple");
    }
  }, 1000);
  // Don't forget to add clearInterval when you want to terminate setInterval();
  //clearInterval(changeColor);
});

.purple {
  background-color: purple;
}

.white {
  background-color: white;
}

.wrapper {
  height: 150px;
  width: 150px;
  position: absolute;
  border: 1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
</div>

$(document).ready(function() {
  var changeColor = setInterval(function() {
    var hasClassPurple;
    $(".div-wrapper").each(function(index) {
      hasClassPurple = $(this).hasClass("purple");
      if (true === hasClassPurple) { $(this).removeClass("purple").addClass("white");
      } else {
       $(this).removeClass("white");  $(this).removeClass("white").addClass("purple");
      }
    });
  }, 1000);
  // Don't forget to add clearInterval when you want to terminate setInterval();
  //clearInterval(changeColor);
});

.wrapper {
  float: left;
  position: absolute;
}

.purple {
  background-color: purple;
}

.white {
  background-color: white;
}

.div-wrapper {
  float: left;
  height: 100px;
  width: 100px;
  position: realtive;
  ;
  border: 1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="div-wrapper purple">
  </div>
  <div class="div-wrapper white">
  </div>
  <div class="div-wrapper purple">
  </div>
  <div class="div-wrapper white">
  </div>
</div>

Answer 2

我能够通过使用递归，for循环和设置间隔找到答案。 loopIt函数每两秒将颜色更改为紫色，loopIt2函数每两秒将颜色更改回其css指定的颜色，但在函数loopIt后开始一秒。循环遍历数组的长度后循环停止递归。

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);
}

这是最终的项目结果https://codepen.io/salamancajr/pen/ZrKKaa?editors=0010