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

Question

我为 children 创建了一个简单的解释器，它允许他们运行程序并控制网格中的对象。整个事情进展顺利，所以最后我开始研究“外观和感觉”。我想做的是在一段时间延迟后执行每个命令(以便移动可见)，并允许屏幕在每个步骤后“重新绘制”。

从我对 setTimeout 的理解来看，这对我没有帮助，因为它异步运行(我不想进一步执行代码)。我什至尝试了一些解决方法(例如，运行循环直到全局变量为 true -> 并在 setTimeout 函数中将变量设置为 true。这也没有解决问题(setTimout 函数仅在浏览器告诉我脚本可能停止工作后才触发) ，尽管超时只有 500 毫秒)。

所以我陷入困境 - 这里的许多答案都说 setTimeout 可以做所有事情，并且不需要“ sleep ”。但就我而言，我不知道......

这是我所拥有的(大大简化):

<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”，它是我们在网格中移动的对象)。

假设我们的“程序”是一串“up right up”命令 -> 因此，执行时，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 进行进一步的处理函数。