window.setTimeout() Troubles

Question

在执行其他代码之前加载图像时遇到一些问题。我有一个解决方法，即设置一个计时器，该计时器将运行几分之一秒，这将使图像在执行其他代码之前加载。我试图重复解决方法，这只会在经销商点击时使页面滞后。

我的文件会使这篇文章非常冗长，所以我只提供指向 github 存储库的链接。

Git HTML 预览

• 你需要玩。解决方法的第一个实例是当您"命中"时。
• 第二个似乎不起作用的实例是当庄家"击中"时。将显示警报，并且不会加载图像。所以换句话说，用户不会看到导致庄家破产或获胜的牌。

有关完整的代码，请参阅 JS 文件

解决方法的第一个实例(HIT()：第 30 行)( 这有效)

window.setTimeout(function afterHit(){
if(count(playerCards) == 21){
stand();
}
else if(checkBust(count(playerCards))){
alert("BUST!");
clear();
}
}, 150);

我遇到问题的部分(第 173 - 183 行)：

function dealerAI() {
while (count(dealerCards) < 16){
window.setTimeout(function dealerHit(){
console.log("check count");
var i = dealerCards.length;
dealerCards[ i ] = drawCard();
document.getElementById( "dealer-cards" ).innerHTML += "<img src='src/img/" + dealerCards[ i ][ 1 ].toString().toLowerCase() + "-" + dealerCards[ i ][ 0 ] + ".png' />";
},500);
}
window.setTimeout(checkWin,500);
}

如果我这样做，它会按照我想要的方式工作，但我希望庄家的动作更慢，以便玩家可以看到庄家在做什么。这真的只是当庄家必须多次击中时才是一个问题。

function dealerAI() {
while (count(dealerCards) < 16){
console.log("check count");
afterAIHit();
}
window.setTimeout(checkWin,200);
}
function afterAIHit(){
window.setTimeout(dealerHit(),200);
}
function dealerHit() {
var i = dealerCards.length;
dealerCards[ i ] = drawCard();
console.log(dealerCards[i]);
document.getElementById( "dealer-cards" ).innerHTML += "<img src='src/img/" + dealerCards[ i ][ 1 ].toString().toLowerCase() + "-" + dealerCards[ i ][ 0 ] + ".png' />";
}

任何帮助将不胜感激:)

谢谢！

Answer 1

由于您正在等待加载图像来处理您的脚本，因此只需附加一个事件侦听器，该侦听器将在图像加载后处理您的代码。

document.querySelector ("#imageWaitingFor").addEventListener ("load",function (){
//Your code
});