window.setTimeout（）问题

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
});