香草javascript中的按钮闪烁效果

我正在复制一个simon游戏原型，并试图用vanilla js编写一个按钮闪烁的函数

目前我有以下功能：

function blinkColor(color) {
  let colorButton = document.getElementById(color);
  colorButton.style.background = *highlightColor*;  
  setTimeout(() => {colorButton.style.background = *originalColor*}, 1000);
}

我用另一种更亮的颜色替换按钮颜色，然后在超时的情况下再次更改。当连续的颜色彼此不同时，它可以工作，但当它需要多次闪烁相同的颜色（例如“红色”、“红色”、“红色”）时，它不会在闪烁之间留下中断，看起来它只是长时间闪烁

---

是否有更好的方法编写此功能？

当高亮显示的颜色与当前颜色相同时，您可以比较颜色并使用默认颜色：

function blinkColor(color) {
  let colorButton = document.getElementById(color);
  colorButton.style.background = *highlightColor*;
  if(highlightColor == colorButton.style.background){
    setTimeout(() => {colorButton.style.background = *white(i.e.)*}, 1000);
  } else {
    setTimeout(() => {colorButton.style.background = *originalColor*}, 1000);
  }
}

---

您必须执行比较以检查颜色类型（rgb、rgba、十六进制…），如果您有可能使用css动画，只需执行：-）

相关代码实际上不在您的问题中

听起来有三件事你需要关心：

一种颜色突出显示

颜色变暗了

下一种颜色高亮显示

您的问题是1和2之间的时间与1和3（1秒）之间的时间相同（或小于）

---

您需要增加1和3之间的时间，以便在再次高亮显示之前颜色可以变暗。1.25秒可能是个不错的选择。

你也可以发布你的HTML吗？@JensPõldme-这不会改变这个答案。您仍然需要使打开每个灯之间的时间大于打开单个灯然后再次关闭同一个灯之间的时间。（例如，将

1000*i

更改为

1250*i

谢谢您的回答！我应该指定上面的函数是另一个settimeout中的回调，该函数针对数组中的每种颜色调用。我增加了此函数的时间，它成功了。