Fatal编程技术网
  • javascript/
  • 等待用户输入的javascript嵌套循环

等待用户输入的javascript嵌套循环

javascript

等待用户输入的javascript嵌套循环,javascript,delay,interpreter,pausing-execution,Javascript,Delay,Interpreter,Pausing Execution,不久前，我用C#构建了一个C解释器，现在已经开始将其转换为Javascript。一切都很顺利，直到我意识到js没有睡眠功能。我的解释器使用递归解析器，当它嵌套在多个函数的深处时，它会暂停用户输入（在C#中，我在第二个线程中使用了waithandle）。我看过setInterval和setTimeout，但它们是异步/非阻塞的；当然，busywait是不可能的，我查看了一个我在SO上发现的定时_队列实现，但没有运气。我已经在主窗口和webworker中尝试了解析器。我正在使用jQuery。我在js

不久前，我用C#构建了一个C解释器，现在已经开始将其转换为Javascript。一切都很顺利，直到我意识到js没有睡眠功能。我的解释器使用递归解析器，当它嵌套在多个函数的深处时，它会暂停用户输入（在C#中，我在第二个线程中使用了waithandle）。我看过setInterval和setTimeout，但它们是异步/非阻塞的；当然，busywait是不可能的，我查看了一个我在SO上发现的定时_队列实现，但没有运气。我已经在主窗口和webworker中尝试了解析器。我正在使用jQuery。我在js方面的经验有限，正在寻找可以追求的想法。我对传接球的风格，或是传球的方式知之甚少，我想知道他们是否掌握了关键。下面是从代码中剪下的一段代码，以显示一些控制脚本。有什么想法吗

var STATE = {
    START: "START",
    RUN: "RUN", //take continuous steps at waitTime delay
    STEP: "STEP", //take 1 step
    PAUSE: "PAUSE",//wait for next step command
    STOP: "STOP",
    ERROR: "ERROR"
}
var state = state.STOP;

function parsing_process() //long process we may want to pause or wait in 
{
    while(token !== end_of_file)//
    {
        //do lots of stuff - much of it recursive
        //the call to getNextToken will be encountered a lot in the recursion
        getNextToken();
        if (state === STATE.STOP)
            break;
    }
}

function getNextToken()
{
    //retrieve next token from lexer array
    if (token === end_of_line)
    {
        //tell the gui to highlight the current line
        if (state === STATE.STOP) 
            return;
        if (state === STATE.STEP)//wait for next step
        {
            //mimick wait for user input by using annoying alert
            alert("click me to continue")
        }

        if (state === STATE.RUN) {
            //a delay here - set by a slider in the window
            //a busy wait haults processing of the window
        }
    }
}
我使用task.js在Firefox中实现了这一点

<html>
<head>
    <title>task.js examples: sleep</title>
    <script type="application/javascript" src="task.js"></script>
</head>
<body>
    Only works in FIREFOX
    <button onclick="step()">Step</button>
    <button onclick="run()">Run</button>
    <button onclick="stop()">Stop</button>
    <pre style="border: solid 1px black; width: 300px; height: 200px;" id="out">
</pre>

    <script type="application/javascript;version=1.8">

        function start() {
            process();
        }

        function step() {
            if (state === STATE.STOP)
                start();
            state = STATE.STEP;
        }
        function run() {
            if (state === STATE.STOP)
                start();
            state = STATE.RUN;
        }
        function stop() {
            state = STATE.STOP;
        }

        var STATE = {
            START: "START",
            RUN: "RUN", //take continuous steps at sleepTime delay
            STEP: "STEP", //take 1 step
            PAUSE: "PAUSE",//wait for next step command
            STOP: "STOP",
            ERROR: "ERROR"
        }

        var state = STATE.STOP;
        var sleepTime = 500;

        function process() {
            var { spawn, choose, sleep } = task;
            var out = document.getElementById("out");
            var i=0;
            out.innerHTML = "i="+i;
            var sp = spawn(function() {
                while(state !== STATE.STOP)
                {
                    i++;
                    out.innerHTML = "i="+i;
                    if (state === STATE.RUN)
                    {
                        yield sleep(sleepTime);
                    }
                    if (state === STATE.STEP)
                        state = STATE.PAUSE;
                    while (state===STATE.PAUSE)
                    {
                        yield;
                    }
                }
            });
        }
    </script>
</body>
</html>


task.js示例：睡眠
仅适用于FIREFOX
步
跑
停止
函数start（）{
过程（）；
}
函数步骤（）{
if（state==state.STOP）
start（）；
state=state.STEP；
}
函数运行（）{
if（state==state.STOP）
start（）；
state=state.RUN；
}
函数停止（）{
state=state.STOP；
}
变量状态={
开始：“开始”，
RUN：“RUN”//在睡眠时间延迟时采取连续步骤
步骤：“步骤”//执行1步
暂停：“暂停”，//等待下一步命令
停止：“停止”，
错误：“错误”
}
var state=state.STOP；
var睡眠时间=500；
函数过程（）{
var{spawn，choose，sleep}=task；
var out=document.getElementById（“out”）；
var i=0；
out.innerHTML=“i=”+i；
var sp=spawn（函数（）{
while（state！==state.STOP）
{
i++；
out.innerHTML=“i=”+i；
if（state==state.RUN）
{
产生睡眠（睡眠时间）；
}
if（state==state.STEP）
state=state.PAUSE；
while（state==state.PAUSE）
{
产量
}
}
});
}
如果有人对承诺有所了解，能给我更多的线索，我将不胜感激。我的应用程序不是一个消费者应用程序，但如果它在Firefox之外运行，那就更好了。如果您在浏览器中运行脚本，需要等待用户输入（单击事件、字段更改事件等），那么您不能使用“while”和“pause”来等待浏览器事件。事件处理程序将被异步调用，到那时，“while”循环甚至可能完成标记列表的读取。可能您应该尝试逐个令牌读取令牌，并根据其值调用下一个操作

试试这个例子：

这里所做的工作非常有用，他使用生成器，它可以在Chrome和Firefox中运行。

作为的作者，我在实现一个调试器时遇到了完全相同的问题，该调试器会暂停并继续动态解释程序。最后，我决定使用es6中的生成器函数，但我想在这里分享我的思考过程

常用的方法是首先将目标代码编译成低级递归自由字节代码。标记每个语句，然后使用
无条件跳转
和
条件跳转
处理所有控制流。然后在上面运行一个字节码解释器。如果您不介意完成所有这些编译工作，那么这是一个很好的选择

另一种方式是“调用堆栈保存/调用堆栈加载”工作流程。当需要暂停解释时，可以递归地将所有参数和所有局部变量推送到自定义堆栈中，一直推到底。当需要继续执行时，递归加载所有这些参数和局部变量。您的代码将从

AddExpression.prototype.visit = function(param) {
  var leftVal = visit(this.left, param);
  var rightVal = visit(this.right, param);
  return leftVal + rightVal;
}
到

这种方法不会改变解释器的主要逻辑，但您可以亲眼看到，对于简单的a+B语法，代码是多么疯狂

最后我决定使用发电机。生成器不是为了交互地改变程序执行，而是为了延迟计算。但通过一些简单的黑客攻击，我们可以在收到“continue”命令时使用lazy对语句进行求值

这里，
function*
表示我们希望
AddExpression.visit
函数成为生成器函数
yield*
后跟
visit
调用意味着
visit
函数本身是一个递归生成器函数

乍一看，这个解决方案似乎很完美，但由于使用generators（），它的性能大大降低，而且它来自es6，没有多少浏览器支持它

总之，实现可中断执行有三种不同的方法：

  • 编译为低级代码：
    • 优点：常见做法、独立关注点、易于优化和维护
    • 缺点：工作太多
  • 保存堆栈/加载堆栈：
    • 优点：相对较快，保留解释逻辑
    • 缺点：难以维护
  • 生成器：
    • 优点：易于维护，完美保留解释逻辑
    • 缺点：速度慢，需要es6到es5传输
    • 您在什么环境中运行？缺少
    睡眠
    功能主要是一种环境因素，而不是语言因素。你应该使用承诺。你能解释一下这可能是如何使用的，即目的是什么吗？我想 
    AddExpression.prototype.visit = function(param) {
    if (needToStop) {
        stack.push({
            method: AddExpression.prototype.visit,
            _this: this,
            params: [param],
            locals: {},
            step: 0
        });
        return;
    }
    if (recoverFromStop && stack.top().step === 0) {
        var thisCall = stack.pop();
        if (stack.length > 0) {
            var nextCall = stack.top();
            nextCall.method.apply(nextCall._this, params);
        }
    }
    var leftvalue = visit(this.left, param);
    if (needToStop) {
        stack.push({
            method: AddExpression.prototype.visit,
            _this: this,
            params: [],
            locals: {
                leftvalue: leftvalue
            },
            step: 1
        });
        return;
    }
    if (recoverFromStop && stack.top().step === 1) {
        var thisCall = stack.pop();
        leftvalue = thisCall.locals.leftvalue;
        if (stack.length > 0) {
            var nextCall = stack.top();
            nextCall.method.apply(nextCall._this, params);
        }
    }
    var rightvalue = visit(this.right, param);
    if (needToStop) {
        stack.push({
            method: AddExpression.prototype.visit,
            _this: this,
            params: [],
            locals: {
                leftvalue: leftvalue,
                rightvalue: rightvalue
            },
            step: 2
        });
        return;
    }
    if (recoverFromStop && stack.top().step === 2) {
        var thisCall = stack.pop();
        leftvalue = thisCall.locals.leftvalue;
        rightvalue = thisCall.locals.rightvalue;
        if (stack.length > 0) {
            var nextCall = stack.top();
            nextCall.method.apply(nextCall._this, params);
        }
    }
    return leftvalue + rightvalue;
};

    function interpret(mainNode, param) {
    var step;
    var gen = visit(mainNode);
    do {
        step = gen.next();
    } while(!step.done);
    return step.value;
}

function visit*(node, param) {
    return (yield* node.visit(param));
}

AddExpression.prototype.visit = function*(param) {
    var leftvalue = yield* visit(this.left, param);
    var rightvalue = yield* visit(this.right, param);
    return leftvalue + rightvalue;
}