Question

我在执行其他代码之前加载图片时遇到了一些麻烦。我有一个解决办法，设置一个将运行几分之一秒的计时器，这将使图像在其他代码执行之前加载。我试图重复这项工作，这只是让经销商点击时页面滞后。

我的文件会让这篇文章变得非常冗长，所以我只会给出github repo的链接。

你需要玩。第一个解决方法就是当你'击中'时。
第二个例子，似乎不起作用的是经销商'点击'。警报将显示，图像将无法加载。换句话说，用户将看不到导致经销商破产或获胜的卡片。

有关完整代码，请参阅JS File

第一个变通办法（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
});

window.setTimeout（）麻烦

1 个答案: