Javascript事件处理和流量控制

Question

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

蟒蛇:

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') ...
        };
    }
};