我正在开发一款使用 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 检查它,但就目前而言,它只是给了我一个错误,因为它试图执行所有代码,而不是等到用户给出输入。
最佳答案
用 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">
关于Javascript/JQuery 等待用户输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22432059/