开发Simon游戏遇异常：按钮需点击两次才触发addClass动画效果

问题根源在于你的animatePress函数逻辑错误：每次点击按钮时调用它，它并没有直接执行动画，而是给对应颜色的按钮新增了一个click事件监听。第一次点击.btn时，只是完成了事件绑定，没触发动画；第二次点击时，才会触发刚绑定的事件执行动画，所以才需要点两次。

修正方案 #

把animatePress改成直接执行动画的函数，去掉内部的on("click")绑定——外层已经有.btn的点击事件，拿到点击的颜色后直接调用函数执行动画即可：

var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];

function playSound(name) {
    var audio = new Audio("./sounds/" + name + ".mp3");
    audio.play();
}

function nextSequence() {
    var randomNumber = Math.floor(Math.random() * 4);
    var randomChosenColour = buttonColours[randomNumber];
    gamePattern.push(randomChosenColour);
    $("#" + randomChosenColour).fadeOut(100).fadeIn(100);
    playSound(randomChosenColour);
}

// 修正后：直接执行动画逻辑，不再绑定事件
function animatePress(currentColour) {
    $("#" + currentColour).addClass("pressed");
    setTimeout(function () {
        $("#" + currentColour).removeClass("pressed");
    }, 100);
}

$(".btn").on("click", function () {
    var userChosenColour = this.id;
    userClickedPattern.push(userChosenColour);
    playSound(userChosenColour);
    animatePress(userChosenColour);
})

更简洁的写法 #

其实可以直接在.btn的点击回调里写动画逻辑，不用单独抽函数，还能避免重复选择DOM元素：

$(".btn").on("click", function () {
    var userChosenColour = this.id;
    userClickedPattern.push(userChosenColour);
    playSound(userChosenColour);
    // 直接操作当前点击的按钮
    $(this).addClass("pressed");
    setTimeout(() => $(this).removeClass("pressed"), 100);
})

内容的提问来源于stack exchange，提问作者Gustavo F. Marcial