Javascript 设置内存游戏中的超时

我正在用javascript制作一个记忆游戏，并将其放在我的网页上。我有3个按钮，分别标记为1、2和3，它们应该按照一定的顺序先变绿，然后再变白。顺序是随机的，每回合增加1。然后，玩家应该按正确的顺序单击按钮。问题是，当我将按钮颜色更改为绿色时，不是每个按钮按正确的顺序依次变为绿色，然后再变为白色，而是按钮同时变为绿色。这是javascript逻辑：

function lightUp() {
  var arrayOrder = gameOrder.split("");
  for(let i = 0; i < arrayOrder.length; i++) {
    document.getElementById("but" + arrayOrder[i]).style.backgroundColor = "green";
    setTimeout(function() {
      document.getElementById("but" + arrayOrder[i]).style.backgroundColor = "white";
    }, 1000);
  }
}

函数lightUp（）{
var arrayOrder=gameOrder.split（“”）；
for（设i=0；i

gameOrder

是数字顺序的字符串（例如“12331231223”）

我认为游戏不起作用是因为

setTimeout

的工作方式，我相信它会在后台暂停，并允许

for

循环继续运行，而不是暂停整个函数一秒钟（这就是我正在尝试做的）

---

我希望每个按钮在下一个按钮改变颜色之前先打开然后关闭。因此，如果顺序是1 2 3，我希望按钮1变为绿色，然后变为白色，然后按钮2变为绿色，然后变为白色，最后按钮3变为绿色，然后变为白色。

您可以按如下方式操作

函数lightUp（）{
var arrayOrder=gameOrder.split（“”）；
for（设i=0；i

---

要了解更多有关其工作原理的信息，请参考

代码的问题是for循环会立即运行，不会有延迟。您对其进行编码时认为，间隔将导致循环等待，直到执行为止。问题是，将不等待就运行

使用队列类型的系统，在该系统中运行步骤，完成后运行下一个步骤，直到完成所有要做的事情

var步骤=[1,2,3,2,1,3,1]
var延迟=1000
var步长=0
函数next（）{
var button=document.getElementById（'btn'+步骤[step]）
按钮。类列表。添加（“on”）
setTimeout（函数（）{
按钮。类列表。删除（“打开”）
台阶++
如果（步骤如Espacarelo所指出的，JS是不同步的。您可以使函数异步并等待
设置超时

这是我使用JS“动画化”事物的首选方式：

async函数lightUp（）{
const sleep=ms=>newpromise（resolve=>setTimeout（resolve，ms））；
用于（gameOrder.split（“”）的常数i）{
const el=document.getElementById（`but${i}`）；
el.style.backgroundColor='绿色'；
等待睡眠（1000）；
el.style.backgroundColor=‘白色’；
}
}

这保持了简单和优雅，不会因为大量回调、递归或嵌套的
setTimeout
s而弄乱代码。它保持为一个函数


编辑：需要注意的是，IE不支持承诺或箭头函数语法。请参阅其他两个答案以获得更广泛的支持。
因为它们都在一次运行时设置为绿色，并且都在1000毫秒时关闭，所以它们是不同步的。我如何修复代码，使其中一个打开，然后关闭，然后关闭下一个下一步呢？构建一个设置而不是循环的队列类型。您可以使用for loop以渐进方式设置超时，但for loop仍然不是OP想要的。它们都将是绿色的。现在应该可以了：）希望OP意识到这个解决方案不会在所有浏览器上都起作用。@epascarello是的！需要注意的是。另外两个答案将提供更广泛的支持，但代价是失去一些简洁性。这在IE中根本不起作用（箭头函数和承诺都不受支持）。