javascriptの警告と実行の停止

Question

ここでは、単純な練習のjavascriptゲームがあります。有効なHTMLカラーのリストを持っています。ページが読み込まれるとランダムな色が選択され、推測を求められ、入力に基づいてヒントが表示されます正しい色を入力すると、背景色が回答の色に変わります。

勝利回答を入力すると、何らかの理由で画面に警告が表示されたときに[OK]を押した後に何らかの理由で背景色が変わるだけですbg色がアラートの前に表示されます。

私の質問は次のとおりです： （1）警告ポップアップを閉じた後にBGの色が変わるのはなぜですか？ （2）警告が画面に表示される前にBGの色を変更する正しい方法は何ですか？

function do_game() { 
       var colors = ["aqua", "beige", "deeppink" , "coral", "honeydew", "lime", "gainsboro","rebeccapurple","peru","tan"].sort(); 
       var answer = colors[Math.floor((Math.random() * colors.length))]; 
       var finished = 0; 
       var numberOfGuesses = 0; 
       var myBody=document.getElementsByTagName("body")[0]; 


       console.log(answer); 
       while(!finished){ 


       var input = prompt('I am thinking of one of these colors \n\n' + colors + '\n\n what color am i thinking of? '); 
       if(input === null) 
        finished = 1; 
       else{ 
        numberOfGuesses++; 
        checkGuess(input); 

        if(input === answer){ 
         myBody.style.background=answer; 
         finished = 1; 
         alert('You are right! \n you took ' + numberOfGuesses + ' Guesses!'); 

        } 
       } 

      } 

      function checkGuess(input){ 
       if(colors.indexOf(input) === -1){ 
        //does not recognize input 
        alert('I don’t recognize that color!'); 
       }else if(input > answer){ 
        //alphabetically higher 
        alert('Your input is alphabetically higher than mine!'); 
       }else if(input < answer){ 
        //alphabatially lower 
        alert('Your input is alphabetically lower than mine!'); 
       } 
      } 
     } 

Answer 1

DOMを更新した機能が実行されるまで、ブラウザは画面を再描画しません。

alertがブロックされているため、[OK]をクリックするまでその機能が実行されなくなります。

alertを別の関数に入れて、setTimeoutを非ブロッキングの方法で呼び出します。

document.body.style.background = "blue"; 
 
setTimeout(function() { 
 
    alert("Hello"); 
 
});