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

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

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

现在我有两个函数可以更改按钮的颜色，然后使用setTimeout等待3秒钟，然后调用另一个函数将按钮更改回白色

我的想法是在一个for循环中运行这个序列，该循环遍历颜色。for循环似乎正在启动，但在继续之前没有等待settimeout从上一次迭代中完成。我想我可能需要回电话，但不确定如何继续

html:

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是

好的，我用一个有效的解决方案更新了一个。请让我知道这是否有效

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

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

---

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

setTimeout是异步的。你的环会立即变蓝，然后变绿，然后变红。然后3秒钟后，它会变回白色3次。您是否希望只需单击一次即可循环使用所有颜色？或者，在颜色恢复为白色后，是否每次都要再次单击？是的，我希望它在1次单击中循环，我如何修改它，使它自动在阵列中循环并更改颜色？无需每次单击？以下是更新的。使用setInterval。

$("#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;
}

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