javascript的同步延迟或命令解释器的setTimeout解决方案
我为孩子们创建了一个简单的解释器,允许他们运行程序并控制网格中的对象。整个过程都很顺利,所以最后我开始制作“外观和感觉”。我想做的是在一段时间延迟后执行每个命令(以便运动可见),并允许屏幕在每个步骤后“重新绘制” 从我对setTimeout的理解来看,这对我没有帮助,因为它以同步方式运行(我不想进一步执行代码)。我甚至尝试了一些解决方法(例如,运行loop直到全局变量为true->并在setTimeout函数中将变量设置为true。这也没有起作用(setTimeout函数仅在浏览器告诉我脚本可能停止工作后才启动,尽管超时时间仅为500毫秒) 所以我被困住了——这里的很多答案都说setTimeout可以做任何事情,不需要“睡眠”。但就我而言,我不知道 以下是我所做的(大大简化):javascript的同步延迟或命令解释器的setTimeout解决方案,javascript,jquery,Javascript,Jquery,我为孩子们创建了一个简单的解释器,允许他们运行程序并控制网格中的对象。整个过程都很顺利,所以最后我开始制作“外观和感觉”。我想做的是在一段时间延迟后执行每个命令(以便运动可见),并允许屏幕在每个步骤后“重新绘制” 从我对setTimeout的理解来看,这对我没有帮助,因为它以同步方式运行(我不想进一步执行代码)。我甚至尝试了一些解决方法(例如,运行loop直到全局变量为true->并在setTimeout函数中将变量设置为true。这也没有起作用(setTimeout函数仅在浏览器告诉我脚本可能
现在我想让暂停在某处…任何地方:)它可以在objectX代码中,也可以在processElementaryCommand或processCommandString中。但我尝试的任何解决方案都会导致无休止的循环,或者在程序运行时表不会更新(它只在X位于X2Y3位置时更新)。正如@Pointy所指出的,setTimeout仍然是您的答案。我可以为你的方法提出一个小的指导方针。您应该考虑拥有一个当前状态对象,该对象存储命令的当前状态,如已处理的内容和将要保留的内容。这可能是一个全球性的问题。然后,您需要以这样一种方式修改您的函数:一旦执行了UI操作,状态对象应该更新,处理的后续部分应该在另一个可调用函数中完成,该函数将作为setTimeout函数的参数。
需要注意的是,此参数函数仅执行一次UI更新,然后使用进一步处理函数再次调用setTimeout。正确答案仍然是
setTimeout()
。如果出于好奇需要阻止线程,请尝试此var pauseTimeout=1500;var startDate=新日期();虽然(new Date()-startDate
,但不要在生产中使用它,将应用程序的逻辑更改为异步并使用setTimeout。@Pointy-我承认你的答案是正确的,但它没有提供任何帮助。不过还是要谢谢你。@Igor Malyk->我已经试过了。该解决方案的问题是,当暂停工作并正在进行时,UI永远不会得到更新。所以你最后只能看到最后位置的“X”->谢谢你的提示。我不是程序员,这是我的第一个javascript程序,所以请耐心听我说。我不得不读了大约20遍你的答案,但最后我得到了:)我已经创建了一个用于测试的JSFIDLE(只有命令向上,正确工作,并且有一个硬编码的循环命令来模拟循环代码块)。所以原始代码(没有延迟)在这里[Fiddle][1]更新的延迟在这里[Fiddle][2]不介意效果,因为我需要稍后优化的概念[1]:[2]:但是延迟代码只适用于基本命令。模拟的命令块(例如,在循环中)不起作用。我目前正在研究解决方案,但我想寻求一些提示,如何处理递归。创建新对象和新对象(但它们将并行运行,我不希望这样),或者以某种方式保存当前对象的状态并在其中运行子例程?谢谢。@BrandonSk,请参阅第页的小提琴。我已经使循环也工作。因此,“右循环右”等命令将起作用。希望这有帮助
<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>
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
}
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;
}