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

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循环在上一次迭代完成后调用相同的函数

for loop that calls same function after previous iteration was completed

javascript

callback

settimeout