javascript - 如何在 onclick 事件后设置恢复到条件？

Question

基本上我想创建的是当单击某个 div 时，innerHTML 会发生变化，但我希望它在单击后可能会在一秒钟后返回

 function setWheels() {
     document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' id='blue-wheel-id' onclick='buttonEvent()'>";
  }

 function buttonEvent() {
      document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
  }
 

现在，一旦页面加载完毕，就会调用 setWheels 函数，使 innerHTML 成为该特定图像。当单击它时，它成为每个 buttonEvent() 函数的新图像，但它保留在该图像上，我希望它在大约一秒钟后返回到另一图像。作为引用，其他功能将添加到 buttonEvent 上，例如音频可能超过一秒

Answer 1

您可以使用 setTimeout()方法。

function setWheels() {
    document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' id='blue-wheel-id' onclick='buttonEvent()'>";
}

function buttonEvent() {
    document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
    setTimeout(setWheels, 1000);
}