有没有办法编写响应 onkeypress 事件的异步等待代码？

Question

我想编写一个 readKey 函数，它是 async，然后 await 在浏览器中按下的每个键。

我想将其构建为同步的、外观正常的代码，这些代码全部基于 async-await。

然后我可以编写一个 readLine 函数，该函数执行 await readKey() 直到用户点击 [enter]，并在用户点击 [back] 时删除最后一个键，等等

然后我可以编写 await readLine() 的函数，并编写调用它们的函数等

我只是不知道如何弥合编写 document.onkeypress 处理程序...与将该事件中的键放入我编写的某些 async readKey 函数之间的差距。在其他语言中，我可以使用其他多线程原语到达那里，但我不知道如何在 js 中使用。我试图弄清楚是否有某种方法可以 yield 该值，但我也不知道该怎么做。

Answer 1

是的。让我们分解一下：

是否可以等待定制的东西？

是的 — 您可以等待任何 Promise。例如等待超时：

const timerPromise = new Promise(resolve => setTimeout(resolve, 1000));
await timerPromise;

是否可以承诺按键？

是 — 在事件发生时解决承诺。

function readKey() {
    return new Promise(resolve => {
        window.addEventListener('keypress', resolve, {once:true});
    });
}

Answer 2

感谢@Kornel 和@Xotic750，这就是我要找的东西：

const readKey = () => new Promise(resolve => window.addEventListener('keypress', resolve, { once: true }));

(async function() {
  console.log('Press a key');
  const x = await readKey();
  console.log('Pressed', String.fromCharCode(x.which));

  console.log('Press a key');
  const y = await readKey();
  console.log('Pressed', String.fromCharCode(y.which));
}());

Answer 3

这将等到元素上的按键事件发生

await new Promise(r=>element.addEventListener('keypress', r));

或者等待任何类型事件的函数，可以像这样

waitForEvent = (element, type) => new Promise(r=>element.addEventListener(type,r));

然后我们可以做

await waitForEvent(document, "load");
// or 
await waitForEvent(element, "keypress");

有没有办法编写响应 onkeypress 事件的异步等待代码？

Is there a way to write async await code that responds to onkeypress events?

javascript

onkeypress

async-await