window.setTimeout() Troubles

Question

I'm having some trouble with an image loading before other code is executed. I have a work around by setting a timer that will run for a fraction of a second which will let the image load before other code is executed. I tried to repeat the work around, and that just made the page lag out when the dealer hits.

My files would make this post very lengthy, so I'll just give links to the github repo.

Git HTML Preview

• You will need to play. The first instance of the work around is when you 'hit'.
• The second instance, which doesn't seem to be working is when the dealer 'hits'. The alert will show and the image won't load. So in other words, the user will not see the card that caused the dealer to bust or win.

For the complete code, please see the JS File

first instance of workaround (hit(): line 30) (this works)

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

The Part that I'm having trouble with (lines 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);
}

If I do this, it works kind of the way I want it to, but I want the dealers moves to be slower so that the player can see what the dealer is doing. It's really only a problem when the dealer has to hit more than once.

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' />";
}

Any help would be appreciated :)

Thanks!

Answer 1

Since you're waiting for an image to load to process your script, just attach an event listener that will process your code after the image has loaded.

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