JS的间隔和延迟

时间:2016-11-20 16:56:48

标签: javascript jquery html css

我试图建立一个西蒙说的游戏,现在我被困在我要点亮用户必须点击的按钮的部分。我用" for"分析我存储序列的数组的每个部分,然后数组应该转到每一轮并点亮按钮,就像这样;等等。但出于某种原因," for"改变同时在数组中传递的每个div的背景,即使我使用项目间隔来永久停止按钮。

这是我正在使用的代码笔:

https://codepen.io/argestis/pen/gLraBq?editors=0011

function litSequence() {
  for (var i = 0; i < game.count.length; i++) {
    if (game.count[i] === 1) {
      game.blue.css("background-color", "cyan");
      setTimeout(function() {
        game.blue.css("background-color", "blue");
      }, 1500);

    } else if (game.count[i] === 2) {
      game.red.css("background-color", "pink");
      setTimeout(function() {
        game.red.css("background-color", "red");
      }, 1500);

    } else if (game.count[i] === 3) {
      game.green.css("background-color", " #4dff4d");
      setTimeout(function() {
        game.green.css("background-color", "green");
      }, 1500);

    } else if (game.count[i] === 4) {
      game.yellow.css("background-color", "orange");
      setTimeout(function() {
        game.yellow.css("background-color", "yellow");
      }, 1500);
    }
  }
};

1 个答案:

答案 0 :(得分:1)

setTimeout没有 - 停止 - 你的逻辑。您可以将其视为创建逻辑运算的并行点。您的逻辑将继续运行,并且只有在该时间过后,超时中的逻辑才会执行。由于js运行速度非常快,因此很可能是循环中的所有setTimeout都会相对靠近并同时显示为同时出现。