javascript - vanilla javascript 中的按钮闪烁效果

Question

我正在复制 simon 游戏原型(prototype)，并尝试在 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、hex...)，如果您有可能为此使用 css-animation，那就这样做:-)