javascript - 内存游戏 - 如何在警报弹出之前显示两个卡片图像

Question

我用 JavaScript 编写了一个内存游戏代码。我的问题是，我无法弄清楚为什么在弹出警报(说万岁，它们相同/或不，它们不匹配)之前，所选的两张卡片都没有显示。我很困惑，因为警报位于单击两张卡片后运行的 isMatch 函数中(isTwoCards 函数)。

var isTwoCards = function(){
    if (this.getAttribute('data-card') === 'king') {
        this.innerHTML = '<img src="King.png" class = "myImgClass" alt="King"/>';   
    } else {
        this.innerHTML = '<img src="Queen.png" class = "myImgClass" alt="Queen" />';
    }
    cardsInPlay.push(this.getAttribute('data-card'));
    if (cardsInPlay.length === 2) {
        isMatch(cardsInPlay);
    }
};

var isMatch = function() {
    if (cardsInPlay[0] !== cardsInPlay[1]) {
        alert('Sorry, try again.');
        cardElement.className = "";
    } else {
        alert('You found a match!')
    };
    cardsInPlay = [];
}

这是完整的代码:http://codepen.io/Lupeman/pen/GNgXrm

任何帮助将不胜感激，因为它让我抓狂!我想在没有 JQuery 的情况下做到这一点。

Answer 1

您可能希望延迟 isMatch 检查，直到 UI 完成更新并且用户已经完成鼠标移动。

if (cardsInPlay.length === 2) {
    setTimeout(function() {
        isMatch(cardsInPlay);
    }, 1000);
}