Question

我为孩子们创建了一个简单的解释器，允许他们运行程序并控制网格中的对象。整件事情都很好，所以最后我开始研究＆＃34;外观和感觉＆＃34;。我想要做的是在一段时间延迟后执行每个命令（以便移动可见）并允许屏幕重新显示＆＃34;每一步之后。

从我如何理解setTimeout，这对我没有帮助，因为它运行异步（我不想进一步执行代码）。我甚至尝试了一些解决方法（例如运行循环，直到全局变量为真 - ＆gt;并在setTimeout函数中将变量设置为true。这也没有做到这一点（setTimout函数仅在浏览器告诉我脚本可能停止后才触发）工作，虽然超时只有500毫秒）。

所以我被卡住了 - 这里有很多答案说setTimeout可以做任何事情，而且没有＆＃34;睡眠＆＃34;需要。但就我而言，我不知道......

这是我的（大大简化）：

<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>

（请注意＆＃34; X＆＃34;，这是我们在网格中移动的对象。）

让我们说＆＃34;程序＆＃34;是一串命令＆＃34;向上＆＃34; - ＆GT;因此，当执行时，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;
}

现在我想在某处暂停...任何地方:)它可以在objectX代码中，它可以在processElementaryCommand中，也可以在processCommandString中。但是我尝试的任何解决方案都导致无限循环，或者表格没有随着程序的进行而更新（只有在X处于X2Y3位置时才更新）。

Answer 1

正如@Pointy所指出的，setTimeout仍然是你的答案。我可以为你的方法提出一个小的指导方针。您应该考虑使用当前状态对象来存储命令的当前状态，如已处理的内容和剩余的内容。这可能是一个全球性的。然后，您需要以这样的方式更改函数：一旦执行UI操作，就应该更新状态对象，并且应该在另一个可调用函数中完成处理的后续部分，该函数将是setTimeout函数的参数。值得注意的是，此参数函数仅执行一次UI更新，然后再使用进一步处理函数调用setTimeout。

javascript的同步延迟或命令解释器的setTimeout解决方案

1 个答案: