我不知道为什么的JavaScript执行此
问题描述：
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)
{
\t if(map[0] == x && map[1] == x && map[2] == x || // horizontal
\t map[3] == x && map[4] == x && map[5] == x || //^
\t map[6] == x && map[7] == x && map[8] == x || //^
\t map[0] == x && map[3] == x && map[6] == x || // vertical
\t map[1] == x && map[4] == x && map[7] == x || //^
\t map[3] == x && map[5] == x && map[8] == x || //^
\t map[0] == x && map[4] == x && map[8] == x || // diagonal
\t map[2] == x && map[4] == x && map[6] == x) //^
\t \t {
\t \t \t
\t alert("Player " + x + " win!"); // Alert for the Player
for(var i=0;i<9;i++)
{
map[i] == 3; // Makes the fields untouchable from User.
}
\t \t }
}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线这个功能上面之前执行。
答
按照建议，我添加了一个dealy给你提醒，因为GUI-Updates需要一些时间。
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)
{
\t if(map[0] == x && map[1] == x && map[2] == x || // horizontal
\t map[3] == x && map[4] == x && map[5] == x || //^
\t map[6] == x && map[7] == x && map[8] == x || //^
\t map[0] == x && map[3] == x && map[6] == x || // vertical
\t map[1] == x && map[4] == x && map[7] == x || //^
\t map[3] == x && map[5] == x && map[8] == x || //^
\t map[0] == x && map[4] == x && map[8] == x || // diagonal
\t map[2] == x && map[4] == x && map[6] == x) //^
\t \t {
\t \t \t
\t 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.
}
\t \t }
}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>+2
这不是说“GUI更新需要一些时间”，它是GUI刷新是特定于实现的，并且主要浏览器在事件循环迭代结束时执行它，而不是同时进行。您可以执行一些冗长的任务，并且在流程到达事件循环结束之前仍然看不到更新。 –
答
虽然你的JavaScript代码运行时，用户界面不会更新;事实上整个页面都被阻塞，直到代码完成。只有这样，控件才会返回到浏览器并更新UI。您可以对Javascript中的元素进行数千种样式更改，它们都将在脚本的末尾以原子方式应用。
只有一个明确的alert是有点的，因为它需要一个例外的情况发生现在，因此将暂停你的脚本，弹出的对话框中，然后在关闭时恢复您的脚本。
要返回控制权给浏览器以更新其用户界面，然后弹出警报，请使用setTimeout来显示警报;延迟可能是0，重要的是该控件返回浏览器一会儿。
+0
谢谢，我不知道该函数后执行的用户界面。感谢：D –
它没有。如果你把它放在调试器中，它就会像你期望的那样发生。是否在显示警报之前预期颜色会发生变化？ –
是不是？你是否登录过你的控制台，看看这是真的，坐下并不一定是真的。另外，如果您检查真/假，您最好使用开关。 – somethinghere
由于JavaScript的异步特性。参见[this]（http://stackoverflow.com/questions/4559032/easy-to-understand-definition-of-asynchronous-event）。 – casual