时间戳

首页 > 解决方案 > 延迟更改颜色两次的问题

javascript - 延迟更改颜色两次的问题

问题描述

我最近开始了我的前端之旅，我想使用 HTML、CSS 和 JavaScript 创建一个类似于“Simon Says”的简单游戏。

我希望应用程序将第一个字段标记为绿色以显示序列，然后 - 在短暂的延迟之后 - 将其更改回默认颜色（白色）。在与第二个按钮相同之后，第三个......等等。

结果我得到了这个：

function showFields() {
    for( var x = 0; x<computerSeq.length; x++) {

        field[computerSeq[x]].style.backgroundColor = "green";

        setTimeout(() => {
            field[computerSeq[x]].style.backgroundColor = "white";
        }, 1000);
    }
}

然而，它并没有像我想象的那样工作，因为背景一直是白色的。我附上下面的其余代码： https ://codepen.io/jhrwekuh/pen/wYrYgV

标签： javascript

解决方案

这里的问题是只有在循环结束运行setTimeout后才会执行回调。for这就是为什么回调setTimeout将收到x循环执行后将获得的值的原因。您可以通过使用 IIFE（立即调用的函数表达式）将实际值传递x到回调中来修复此代码：

setTimeout((index => () => { field[computerSeq[index]].style.backgroundColor = "white"; })(x), 1000);

请参阅固定的代码笔

推荐阅读