window.setTimeout（）問題

Question

我在執行其他代碼之前加載圖像時遇到了一些問題。我有一個解決方法，即設置一個將運行幾分之一秒的計時器，這會讓圖像在其他代碼執行之前加載。我試圖重複周圍的工作，並且只是在莊家擊中時才使頁面滯後。

我的文件會使這篇文章非常冗長，所以我只會給鏈接到github回購。

Git HTML Preview

• 你將需要發揮。第一個解決方法是當你「打」時。
• 第二種情況似乎並不奏效，即經銷商「點擊」時。警報將顯示，圖像將不會加載。換句話說，用戶不會看到導致經銷商破產或贏的牌。

有關完整代碼，請參閱解決方法的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 
});