javascript - while 循环中的 setTimeOut

Question

我的目标是创建一个 simon 游戏，我目前正在尝试按如下方式更改每个 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>