Question

var map = [0,0,0,0,0,0,0,0,0],  // Array for the Game and the the Win Check
    design = ["td0", "td1", "td2", 
           "td3", "td4", "td5", 
           "td6", "td7", "td8"], // Array for the fields of the Table.
    Player = true; // true is player Blue, false is player red. 

function Game(x) // Game() will be executed when a field in the Table is clicked.
{
  switch(Player) // Switch from Player 1 to 2 
    {
      case true:
        if(map[x] == 0) // this if is for 
        {
            document.getElementById(design[x]).style.backgroundColor = "blue";
            map[x] = 1; // in the 'map' array 1 are Player Blue fields and 2 are Player Red fields
            Check(1); // The Win Check for the Game
            Player = false; // PlayerChange to Player 1 or 'Red'
        }
        break;
      case false:
        if(map[x] == 0)
        {
            document.getElementById(design[x]).style.backgroundColor = "red";
            map[x] = 2; 
            Check(2);
            Player = true; // PlayerChange to Player 2 or 'Blue'
        }
     }
}

function Check(x)
{
	if(map[0] == x && map[1] == x && map[2] == x || // horizontal 
 	   map[3] == x && map[4] == x && map[5] == x || // ^
	   map[6] == x && map[7] == x && map[8] == x || // ^
	   map[0] == x && map[3] == x && map[6] == x || // vertical
	   map[1] == x && map[4] == x && map[7] == x || // ^
	   map[3] == x && map[5] == x && map[8] == x || // ^
	   map[0] == x && map[4] == x && map[8] == x || // diagonal
	   map[2] == x && map[4] == x && map[6] == x)   // ^
		{
			
	    alert("Player " + x + " win!"); // Alert for the Player
        
          for(var i=0;i<9;i++) 
          {
            map[i] == 3; // Makes the fields untouchable from User.
          }    
		}
}

td
{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

<html>
  <head>
    
  </head>
  <body>
    <table>
      <tr>
        <td id="td0" onclick="Game(0);" />
        <td id="td1" onclick="Game(1);" />
        <td id="td2" onclick="Game(2);" />
      </tr>
      <tr>
        <td id="td3" onclick="Game(3);" />
        <td id="td4" onclick="Game(4);" />
        <td id="td5" onclick="Game(5);" />
      </tr>
      <tr>
        <td id="td6" onclick="Game(6);" />
        <td id="td7" onclick="Game(7);" />
        <td id="td8" onclick="Game(8);" />
      </tr>
     </table>
  </body>
<html>

我的问题在这里，我不知道/理解为什么在document.getElementById("id").style.backgroundColor = "color"之前执行检查（带警报），这比这个函数高2行。

Answer 1

根据建议，我添加了一个dealy给你警报，因为GUI更新需要一些时间。

var map = [0,0,0,0,0,0,0,0,0],  // Array for the Game and the the Win Check
    design = ["td0", "td1", "td2", 
           "td3", "td4", "td5", 
           "td6", "td7", "td8"], // Array for the fields of the Table.
    Player = true; // true is player Blue, false is player red. 

function Game(x) // Game() will be executed when a field in the Table is clicked.
{
  switch(Player) // Switch from Player 1 to 2 
    {
      case true:
        if(map[x] == 0) // this if is for 
        {
            document.getElementById(design[x]).style.backgroundColor = "blue";
            map[x] = 1; // in the 'map' array 1 are Player Blue fields and 2 are Player Red fields
            Check(1); // The Win Check for the Game
            Player = false; // PlayerChange to Player 1 or 'Red'
        }
        break;
      case false:
        if(map[x] == 0)
        {
            document.getElementById(design[x]).style.backgroundColor = "red";
            map[x] = 2; 
            Check(2);
            Player = true; // PlayerChange to Player 2 or 'Blue'
        }
     }
}

function Check(x)
{
	if(map[0] == x && map[1] == x && map[2] == x || // horizontal 
 	   map[3] == x && map[4] == x && map[5] == x || // ^
	   map[6] == x && map[7] == x && map[8] == x || // ^
	   map[0] == x && map[3] == x && map[6] == x || // vertical
	   map[1] == x && map[4] == x && map[7] == x || // ^
	   map[3] == x && map[5] == x && map[8] == x || // ^
	   map[0] == x && map[4] == x && map[8] == x || // diagonal
	   map[2] == x && map[4] == x && map[6] == x)   // ^
		{
			
	    setTimeout(function(){alert("Player " + x + " win!")}, 100);; // Alert for the Player
        
          for(var i=0;i<9;i++) 
          {
            map[i] == 3; // Makes the fields untouchable from User.
          }    
		}
}

td
{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

<html>
  <head>
    
  </head>
  <body>
    <table>
      <tr>
        <td id="td0" onclick="Game(0);" />
        <td id="td1" onclick="Game(1);" />
        <td id="td2" onclick="Game(2);" />
      </tr>
      <tr>
        <td id="td3" onclick="Game(3);" />
        <td id="td4" onclick="Game(4);" />
        <td id="td5" onclick="Game(5);" />
      </tr>
      <tr>
        <td id="td6" onclick="Game(6);" />
        <td id="td7" onclick="Game(7);" />
        <td id="td8" onclick="Game(8);" />
      </tr>
     </table>
  </body>
<html>

Answer 2

当您的Javascript代码运行时，UI不会更新;事实上整个页面都被阻止，直到你的代码完成。只有这样才能将控件返回到浏览器并更新UI。您可以在Javascript中对元素进行数千种样式更改，它们都将在脚本末尾以原子方式应用。

只有明确的alert有点异常，因为它需要立即发生，所以它会暂停你的脚本，弹出对话框，然后恢复你的脚本当它关闭时。

要将控制权返回给浏览器以更新其UI，然后弹出警报，请使用setTimeout显示警报;延迟可以是0，重要的是控件会暂时返回给浏览器。

我不知道为什么JavaScript会这样做

2 个答案: