メモリゲーム - アラートが飛び出す前に両方のカードイメージを表示する方法

Question

私はJavaScriptでメモリゲームのコードを書いています。私の問題は、選択されたカードの両方がアラートの前に表示されない理由（それらが同じかどうか、または一致しない、または一致しないことを示す）がポップアップする理由を理解できないことです。両方のカードがクリックされた後に実行されるisMatch関数（isTwoCards関数）に警告があるので、私は混乱しています。それは私にナットを駆動しているため、任意の助けをいただければ幸いですhttp://codepen.io/Lupeman/pen/GNgXrm

：

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 = []; 
} 

は、ここで全体のコードです！私はJQueryなしでそれをしたいと思います。

Answer 1

isMatchのチェックは、UIの更新が完了し、ユーザーが既にマウスを上げて終了するまで、遅らせることをお勧めします。

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