我为孩子们创建了一个简单的解释器,允许他们运行程序并控制网格中的对象。整个过程都很顺利,所以最后我开始研究"外观和感觉"。我想做的是在一段时间延迟后执行每个命令(这样移动就可见),并允许屏幕在每个步骤后"重新绘制"。
从我对setTimeout的理解来看,这对我没有帮助,因为它运行非同步(我不想进一步执行代码)。我甚至尝试了一些变通方法(例如,运行循环直到全局变量为true->并在setTimeout函数中将变量设置为true。这也没有奏效(setTimout函数是在浏览器告诉我脚本可能停止工作后才启动的,尽管超时时间只有500ms)。
所以我被卡住了——这里的很多答案都说setTimeout可以做任何事情,不需要"睡眠"。但就我而言,我不知道。。。
以下是我所拥有的(大大简化):
<table id="city_table" class="city" style="width: 400px">
<tr>
<td id="cellX1Y3" align="center"></td>
<td id="cellX2Y3" align="center"</td>
<td id="cellX3Y3" align="center"></td>
</tr>
<tr>
<td id="cellX1Y2" align="center"></td>
<td id="cellX2Y2" align="center"></td>
<td id="cellX3Y2" align="center"></td>
</tr>
<tr>
<td id="cellX1Y1" align="center">X</td>
<td id="cellX2Y1" align="center"></td>
<td id="cellX3Y1" align="center"></td>
</tr>
</table>
(请注意"X",它是我们要在网格中移动的对象)。
假设我们的"程序"是一个"向上"->的命令字符串,所以当执行时,X会移动到坐标X1Y2、X2Y2和X2Y3。一旦用户运行程序,就会触发一个函数processCommandString(str),它看起来像这样:
processCommandString(str) {
var aProgram = [];
aProgram = str.split(" ");
for (iP = 0; iP < aProgram.length; iP++) {
cmdReturn = executeElementaryCommand(aProgram[iP]);
switch(cmdReturn) {
case 0:
//all is ok, increase counters, etc., proceed with next command
break;
case 1:
//non critical error in program (meaning user program, not mine)
break;
case 2:
//critical error -> throw exception and stop
break;
case 10:
// [IF like statement] -> evaluate condition and proceed accordingly
break;
case 20:
// [LOOP like statement] -> ...
break;
case 90:
// custom command
break;
//Please note that cases 10, 20, and 90 may call the processCommandString recursively
} //end switch
} //end for
}
然后我们有一个函数processElementaryCommand(cmd)。
function executeElementaryCommand(cmd_param) {
var rtrn;
switch (cmd) {
case eCMDs[0]: //MOVE
//some stuff
rtrn = objectX.step();
break;
case eCMDs[1]: //TURN
rtrn = objectX.turn(direction);
break;
//case ... (continues for all elementary commands that are in eCMDs array
//objectX is an object that actually updates the position of the "X" in the grid:
//What it does: (1) sets $("cellXaYb").innerHTML="" -> a, b are current (old) coordinates; (2) sets $("cellXcYd").innerHTML="X" -> c, d being new coordinates
default:
//check here for custom commands
rtrn = 99;
break;
} //switch end
return rtrn;
}
现在我想暂停一下。。。Anywhere:)它可以在objectX代码中,也可以在processElementaryCommand或processCommandString中。但我尝试的任何解决方案都会导致无休止的循环,或者随着程序的进行,表没有更新(只有当X位于X2Y3位置时才更新)。