Question

我正在尝试编写一个循环遍历颜色数组的for循环，并调用另一个使用该数组更改按钮颜色的函数。

目前我有一个三种颜色的数组，我希望按钮更改为第一种颜色然后等待然后转回白色然后更改为第二种颜色然后等待然后转为白色然后更改为第三种颜色并等待转向白色。

现在我有两个功能可以改变按钮的颜色，然后使用setTimeout等待3秒钟，再调用另一个将按钮改回白色的功能。

我的想法是在for循环中运行这个序列，循环遍历颜色。 for循环似乎正在触发，但是在继续之前不等待setTimeouts从上一次迭代完成。我想我可能需要回调，但不知道如何继续。

HTML：

<body>
  <button id="bigButton">Change Color</button>

  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</body>

CSS：

button{
  background-color: white;
}

使用Javascript：

$("#bigButton").on('click', function(){
    var a=["blue", "green", "red"];
    for(var m=0; m<a.length; m++){
        turnOn(a[m]);
    }
});

var timerID = null;
function turnOn (inputColor) {
    $("#bigButton").css("background-color", inputColor)
    clearTimeout (timerID);
    timerID = null;
    if (timerID === null) {
        timerID = setTimeout ("turnOff()", 3000);
    }
}
function turnOff () {
    $("#bigButton").css("background-color", "white")
    clearTimeout (timerID);
    timerID = null;
}

codepen是here

Answer 1

好的，我用一个有效的解决方案更新了jsFiddle。如果有效，请告诉我。

关键是将颜色数组移出，并根据递增的索引更改要查看的颜色：

var colors = ["blue", "green", "red"];
var currentIndex = 0;
var white = true;
$("#bigButton").on('click', function() {
  turnOn();
});

var timerID = null;

function turnOn() {
  if (!white) {
    white = true;
    inputColor = "white";
  } else {
    white = false;
    if (currentIndex === colors.length) {
      currentIndex = 0;
    }
    inputColor = colors[currentIndex];
    currentIndex++;
  }
  $("#bigButton").css("background-color", inputColor)
  console.log("color changed to ", inputColor);
  clearTimeout(timerID);
  timerID = null;
  if (timerID === null) {
    timerID = setTimeout("turnOff()", 3000);
  }
}

function turnOff() {
  $("#bigButton").css("background-color", "white")
  console.log("color changed to white");
  clearTimeout(timerID);
  timerID = null;
}

这是解决这个问题的一种方法。每次都必须单击按钮才能更改颜色。

for循环在上一次迭代完成后调用相同的函数

1 个答案: