vanilla javascript中的按钮闪烁效果

Question

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

目前我有以下功能：

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

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

有没有更好的方法来编写这个功能？

Answer 1

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

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-animation，那就去做吧 :-)

Answer 2

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

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

1. 一种颜色突出显示
2. 颜色变暗
3. 下一个颜色突出显示

您的问题是 1 和 2 之间的时间等于（或小于）1 和 3 之间的时间（1 秒）。

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