JavaScript中的DOM操作和警报功能行为

Question

我在开发一个简单的JavaScript游戏时遇到了以下问题。

以下是代码：

全局变量定义：

var player1score,player2score= 0;
var activePlayer = '1';

rollDice函数是由按钮上的click event调用的。

var rollDice = function(){

var randomNumber = Math.floor((Math.random() * 7) + 0);
var currentscore = newscore(randomNumber);
console.log("randomNumber",randomNumber);


    if(activePlayer === '1'){      
        document.querySelector("#player1_currentscore").innerHTML = randomNumber;       
    }else if(activePlayer === '2'){             
        document.querySelector("#player2_currentscore").innerHTML = randomNumber;          
    }   

   //below function displays an alert box based on currentscore value .    
   checkwhowins(currentscore);     

}

//在rollDice中调用下面的函数，并根据传递的当前值显示一个警告框

function checkwhowins(currentscore){


     if(currentscore >= 15 ){  

        //console.log('inside if condition ');
        alert('Congratulations Player '+activePlayer+'  !!!! ,  You are a winner with a score of '+currentscore); 

     }

}  

问题 ：

我观察到的是当checkwhowins方法DOES DISPLAY ALERT框时，在rollDice函数中进行的DOM操作不起作用。 意思是：

document.querySelector("#player2_currentscore").innerHTML = randomNumber; 

不显示当前值为ZERO。

但当checkwhowins不显示警告框时，

document.querySelector("#player2_currentscore").innerHTML = randomNumber作品和currecore获得更新价值

为什么会发生这种情况？

我真的无法理解它。

为什么调用Alert函数时DOM不会更新？

Answer 1

我不确定可能会发生什么，但我会尝试延迟chekwhowins在超时中包装它：

setTimeout( () => checkwhowins(currentscore) , 1000);  // one second delay

我想这会留下DOM来更新。