Javascript - 单击事件前的提醒显示

我写了这种方法，将卡翻转过来面朝上onClick，然后显示alert方法。但是，由于某种原因，当我点击卡时，它会保持正面朝下，并显示alert方法。然后，一旦我关闭警报，卡片就翻转过来。Javascript - 单击事件前的提醒显示

如何将卡片翻转过来然后显示alert？

... 
newCard.addEventListener('click', flipCard); 
... 

//method to flip card face up 
function flipCard() { 

    cardsInPlay.push(this.getAttribute('data-card')); 

    if(this.getAttribute('data-card') == 'king'){ 
     this.innerHTML = '<img src="my_king.png" alt="King of Spades" />'; 
    } 

    if(this.getAttribute('data-card') == 'queen'){ 
     this.innerHTML = '<img src="my_queen.png" alt="Queen of Spades" />';    
    } 

    if (cardsInPlay.length === 1) { 
     alert("Congrats, you flipped a card"); 
     } 

}

来源

2016-11-14 user2456977

设置'src'属性只在后台启动图像“下载”。下载排队后脚本将继续运行。 alert（）函数暂停其他活动的执行。尝试将警报放在一个简短的'setTimeout'中。（即'setTimeout（function（）{alert（“Congrats，you flip a card”）}，1）;'）。还有其他方法可以做到这一点 - 比如向图像的“onload”添加事件处理程序。 – Tibrogargan

从我的理解，正确的方法是使用承诺和回调。

https://www.sencha.com/blog/asynchronous-javascript-promises/

这样，你可以运行它创建经过一番工作已经完成，即你已经修改了当前卡的innerHTML警报功能。

狡猾的办法是做这样的事情：

setTimeout(function() { 
    alert("Congrats, you flipped a card"); 
}, 500);

来源

2016-11-14 18:42:57

Javascript - 单击事件前的提醒显示

回答

相关问题