JavaScript中setTimeout失效问题：Simon游戏按钮闪烁功能异常

以下是几个可能导致闪烁效果失效的关键排查点：

1. 点击事件未绑定到按钮 #

animatePress函数定义后，如果没有给按钮添加点击触发逻辑，函数永远不会执行。检查是否存在类似的事件绑定代码：

// 假设按钮都带有.btn类，id为red、blue等
$(".btn").click(function() {
  animatePress($(this).attr("id"));
});

若缺少这段代码，点击按钮不会触发闪烁逻辑。

2. "pressed" CSS类未正确定义 #

闪烁效果完全依赖pressed类的视觉变化，如果CSS中没有定义该类或样式无效，就看不到闪烁。确保CSS中有类似规则：

.pressed {
  box-shadow: 0 0 20px #fff;
  background-color: #ccc;
  /* 也可以用opacity、transform等属性实现视觉变化 */
}

注意类名拼写必须和JS中的"pressed"完全一致，大小写敏感。

3. jQuery未正确引入 #

代码中使用了jQuery的$("#" + currentColour)选择器，如果页面未引入jQuery库，这段代码会直接报错，导致函数失效。检查HTML头部是否有：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

需确保jQuery在你的JS代码之前引入。

4. 参数与按钮id不匹配 #

检查调用animatePress时传入的currentColour值，是否和按钮实际id完全一致（比如大小写、拼写错误）。例如按钮id是"Red"但传入的是"red"，会导致找不到目标元素。

5. 异步逻辑被干扰 #

如果有其他代码在100ms内修改同一按钮的类，可能会覆盖setTimeout的效果。可以添加日志验证类的变化：

function animatePress(currentColour) {
  const $btn = $("#" + currentColour);
  console.log("添加前:", $btn.hasClass("pressed"));
  $btn.addClass("pressed");
  console.log("添加后:", $btn.hasClass("pressed"));
  
  setTimeout(function(){
    $btn.removeClass("pressed");
    console.log("移除后:", $btn.hasClass("pressed"));
  },100);
}

打开浏览器控制台，点击按钮查看日志，确认类的添加/移除是否正常执行。

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