Javascript 事件处理和流程控制

Question

我正在尝试构建一个根据提供的输入加载的网页。基本上，我在用 javascript 处理事件时遇到了一些麻烦。来自 python，如果我想在移动到下一个要显示的对象之前等待特定的键盘输入，我会创建一个 while 循环并在其中放置一个键监听器。

python :

def getInput():
  while 1:
    for event in pygame.event.get(): #returns a list of events from the keyboard/mouse
      if event.type == KEYDOWN:
        if event.key == "enter": # for example
          do function()
          return
        elif event.key == "up":
          do function2()
          continue
        else: continue # for clarity

在尝试找到一种在 DOM/javascript 中实现它的方法时，我似乎只是让页面崩溃(我假设是由于 While 循环)，但我认为这是因为我的事件处理编写得不好。此外，使用“element.onkeydown = function;”注册事件处理程序我很难全神贯注，setInterval(foo(), interval] 并没有给我带来太大的成功。

基本上，我想要一个“监听”循环来对键 X 执行特定行为，但在按下键 Y 时中断。

Answer 1

在 JavaScript 中，您放弃了对主循环的控制。浏览器运行主循环并在事件或超时/间隔发生时回调到您的代码中。您必须处理该事件然后返回，以便浏览器可以继续执行其他操作、触发事件等。

所以你不能有一个“听”循环。浏览器会为您做这些，给您事件并让您处理它，但是一旦您处理完事件就必须返回。你不能退回到不同的循环。这意味着您不能编写逐步的程序代码；如果你的状态在事件调用之间持续存在，你必须存储它，例如。在变量中。

这种方法行不通:

<input type="text" readonly="readonly" value="" id="status" />

var s= document.getElementById('status');
s.value= 'Press A now';
while (true) {
    var e= eventLoop.nextKeyEvent(); // THERE IS NO SUCH THING AS THIS
    if (e.which=='a')
        break
}
s.value= 'Press Y or N';
while (true) {
    var e= eventLoop.nextKeyEvent();
    if (e.which=='y') ...

必须将分步代码从里到外翻转，以便浏览器向下调用您，而不是您向上调用浏览器:

var state= 0;
function keypressed(event) {
    var key= String.fromCharCode(event? event.which : window.event.keyCode); // IE compatibility
    switch (state) {
        case 0:
            if (key=='a') {
                s.value= 'Press Y or N';
                state++;
            }
            break;
        case 1:
            if (key=='y') ...
            break;
    }
}

s.value= 'Press A now';
document.onkeypress= keypressed;

您还可以使代码看起来更线性一些，并通过使用嵌套的匿名函数清理一些状态信息:

s.value= 'Press A now';
document.onkeypress= function(event) {
    var key= String.fromCharCode(event? event.which : window.event.keyCode);
    if (key=='a') {
        s.value= 'Press Y or N';
        document.onkeypress= function(event) {
            var key= String.fromCharCode(event? event.which : window.event.keyCode);
            if (key=='y') ...
        };
    }
};