触发onclick点击事件修改元素状态后，如何在设定时长后恢复初始状态？

核心使用JS内置的setTimeout API实现延迟状态恢复，同时新增定时器清理逻辑避免连续点击导致的状态冲突，修改后代码如下：

// 全局变量存储恢复定时器ID，用于处理连续点击场景
let wheelRestoreTimer = null;

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

function buttonEvent() {
  // 清空之前未执行的恢复定时器，避免状态错乱
  if (wheelRestoreTimer) {
    clearTimeout(wheelRestoreTimer);
  }
  // 替换为点击后的亮态图片
  document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";

  // 后续可在此处添加音频播放等自定义逻辑
  // 示例：const audio = new Audio('click-effect.mp3'); audio.play();

  // 延迟恢复，第二个参数为等待时长，单位是毫秒，1000即1秒，可按需调整
  wheelRestoreTimer = setTimeout(() => {
    // 调用初始化方法恢复初始暗态图片
    setWheels();
    wheelRestoreTimer = null;
  }, 1000);
}

方案说明 #

• 针对连续点击场景：每次触发点击事件时先清空未执行的恢复定时器，确保只有最后一次点击的恢复逻辑会生效，不会出现状态频繁跳变的问题
• 后续扩展方便：如果添加了音频播放逻辑，可以直接将延迟时长设置为音频的总时长，实现音频播放完成后自动恢复状态的效果，无需手动计算时间
• 逻辑复用：恢复状态直接复用已有的setWheels函数，后续修改初始展示内容仅需调整setWheels一处代码即可，维护成本更低

内容的提问来源于stack exchange，提问作者ryan