Existe-t-il un moyen d'écrire du code d'attente asynchrone répondant aux événements onkeypress?

Question

Je voudrais écrire une fonction readKey qui est async, puis await chaque touche étant pressée dans le navigateur.

Je voudrais construire ceci dans le code synchrone et normal qui est tout basé sur async - await.

Alors je pourrais écrire une fonction readLine qui fait await readKey() jusqu'à ce que l'utilisateur clique sur [Entrée], et supprimer la dernière touche si l'utilisateur clique [arrière], etc.

Et alors je pourrais écrire des fonctions qui await readLine() , et écrire des fonctions qui les appellent, etc.

Je ne sais tout simplement pas comment combler le fossé entre écrire un gestionnaire document.onkeypress ... et mettre les clés dans cet événement dans une fonction async readKey que j'écrirais. Dans d'autres langages, je pourrais utiliser d'autres primitives multi-threading pour y arriver, mais je n'arrive pas à comprendre comment utiliser in js. J'essayais de comprendre s'il y avait un moyen d'atteindre la valeur yield, mais je ne vois pas non plus comment le faire.

Answer 1

Oui. Divisons-le:

Est-il possible d'attendre une chose personnalisée?

Oui - vous pouvez attendre Promise. Par exemple, d'attendre un délai d'attente:

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

Est-il possible d'avoir une promesse d'appui sur une touche? Oui - résoudre la promesse lorsqu'un événement se produit.

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

Answer 2

Merci à @Kornel et @ Xotic750, voici ce que je cherchais:

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