8

I'd like to write a readKey function that's async, and then await each key being pressed in the browser.

I'd like to build this up into synchronous, normal-looking code that's all based on async-await.

So then I could write a readLine function that does await readKey() until the user hits [enter], and delete the last key if the user hits [back], etc.

And then I could write functions that await readLine(), and write functions that call them, etc.

I just don't know how to bridge the gap between writing a document.onkeypress handler... and putting the keys in that event into some async readKey function that I'd write. In other languages, I could use other multi-threading primitives to get there, but I can't figure out how to in js. I was trying to figure out if there was some way to yield the value, but I can't see how to do that, either.

2
  • Another way to ask is, why can't I "await document.readKey()"? Commented Jun 25, 2017 at 13:01
  • How was that rude. I said nothing about anyone but me. Perhaps you should keep your advice to yourself Commented Jun 25, 2017 at 13:24

3 Answers 3

13

Yes. Let's break it down:

Is it possible to await a custom thing?

Yes — you can await any Promise. For example, to wait for a timeout:

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

Is it possible to have a promise for a key press?

Yes — resolve the promise when an event happens.

function readKey() {
    return new Promise(resolve => {
        window.addEventListener('keypress', resolve, {once:true});
    });
}
1
  • 4
    The whole application would need to be contained in an async IIFE would it not, if it has any chance of behaving like the OP described? (async function() { ... }()); jsfiddle.net/9yn4nnr6
    – Xotic750
    Commented Jun 25, 2017 at 13:36
9

Thanks to @Kornel and @Xotic750, here's what I was looking for:

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));
}());
0

This would wait until a keypress event on an element happens

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

Or a function to wait for any kind of events, can look like this

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

Then we can do things like

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.