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检查它，但现在它只会给我一个错误，因为它尝试执行所有代码，而不是等待用户输入。

- user1433479

---

你能提供一个 jsFiddle 吗？ - Dimitri

@KopaxJackHerrauer 不行 :/，这个依赖于太多其他代码，但问题与此无关。我只需要一种在JavaScript中等待用户输入的方法。 - user1433479

我正在编写一个简单的示例，请稍等。 - Dimitri

你不能在执行JavaScript时“等待用户输入”而不使用内置函数（如prompt()或alert()）。JavaScript根本不是这样工作的。通常解决此问题的方法是禁用页面上的其余UI，弹出对话框，然后响应OK或Cancel事件，并基于其中一个事件调用其余代码。 - jfriend00

Answer 1

使用async+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">

- A_A

---

为什么你写了 const test = await 20;？20 可以是任何其他数字吗？ - Yolomep

@Yolomep 我不知道我最初为什么这样做，可能是想试试它是否有效。这绝对不是必要的，也没有任何好处，所以我从代码片段中删除了这行代码。 - A_A

Answer 2

在编程中，你必须有不同的思维方式。当使用prompt()时，JavaScript会停止并等待返回值，但是对于自定义提示框，你无法直接实现这一点。

var result = [];
for(var i = 0; i > 5; i--){
    result.push( prompt('tip something') ); // Ok
};

JavaScript 会在 prompt 返回结果之前中断执行。

但是你不能像浏览器在提示时那样告诉你的代码停止执行。你需要在关闭模态框（点击按钮或按下回车键）时执行一段代码，以打开/更新下一个模态框。

- Dimitri

---

我不明白这段代码的作用是什么。它还在使用提示吗？ - user1433479

这是一个自定义提示符，请在HTML页面中尝试。我正在更新我的答案。 - Dimitri

好的，但我不想要一个自定义提示。我有一个输入字段和对话框，我需要一些函数来询问用户问题，等待用户的响应，然后正常地继续代码。这个自定义提示不像普通提示那样等待输入。 - user1433479

我给你一个答案，就像浏览器一样，你无法实现这一点，我给你一个自定义提示。请参考@jfriend00的回答，如果不告诉他停止，你无法停止脚本，打开提示框必须停止脚本，关闭后再启动它，如果需要更多解释，请提出要求。 - Dimitri

我没有给你投反对票，但是感谢你的“友善”。顺便说一下，你的自定义提示与我寻求帮助的内容完全不同。 - user1433479