Javascript/JQuery 等待用户输入

Question

我正在开发一款使用 Javascript 和 JQuery 制作的基于文本的浏览器游戏。我遇到了用户输入的问题。我过去所做的只是使用 prompt()，因为它易于使用，允许我将输入保存到变量并让代码等待输入。

现在我想让它看起来更好，所以我制作了自己的输入框，上面有一个漂亮的聊天框。我想知道的是如何在用户按下回车键之前停止执行代码(我已经检测到回车键并且文本被附加到对话框中，我只需要代码在它之前等待它发生继续)。

这是我的一些代码:

输入函数

function input_field() {
    var inputField = $('#dialog-input');
    var messageField = $('#dialog-text');

    inputField.keyup(function (e) {
        if (e.keyCode == 13) {
            window.userInput = inputField.val();
            if(userInput != '') {
                messageField.append('You: ' + window.userInput + '<br>');
                inputField.val('');
                messageField.scrollTop(999999999);
            }
        }
    });
}

我想做的只是将数据保存到一个变量中，然后像使用 prompt() 一样使用 switch-case 检查它，但就目前而言，它只是给了我一个错误，因为它试图执行所有代码，而不是等到用户给出输入。

Answer 1

用 asynch+await 是可以的。

请注意，目前并非所有浏览器都完全支持它 (http://caniuse.com/#search=await)，对于此类问题可能有更好的解决方案。

使用 await myAsyncFunction() 使浏览器将函数视为同步函数，因此它会停止进一步执行此函数，直到等待的函数返回结果。它不会阻止网站上的其他代码运行。

await 只能在 async function 中使用，否则浏览器会抛出错误。

这是一个示例，展示了如何使用 await+async 等待用户输入:

async function handleForm() {
  let userInput = '';
  console.log('Before getting the user input: ', userInput);
  userInput = await getUserInput();
  console.log('After getting user input: ', userInput);
};

function getUserInput() {
  return new Promise((resolve, reject) => {
    $('#myInput').keydown(function(e) {
      if (e.keyCode == 13) {
        const inputVal = $(this).val();
        resolve(inputVal);
      }
    });
  });
};

handleForm();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput">