Javascript/JQuery 等待用戶輸入

Question

我正在開發使用 Javascript 和 JQuery 制作的基於文本的瀏覽器游戲。 我遇到了用戶輸入的問題。 我以前所做的只是使用prompt()因為它易於使用，允許我將輸入保存到變量並使代碼等待輸入。

現在我想讓它看起來更好，所以我在它上面有一個漂亮的聊天框，我自己制作了輸入字段。 我想知道的是如何在用戶按下 Enter 之前停止執行代碼（我已經檢測到按下 Enter 並且文本被附加到對話框中，我只需要代碼在它之前等待它發生繼續）。

這是我的一些代碼：

輸入功能

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

異步+等待是可能的。

請注意，目前並非所有瀏覽器（ 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">

Answer 2

您必須采取不同的方式，而 javascript 在使用 prompt() 時會停止並等待返回值，但您無法使用自定義提示直接實現這一點。

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

javascript 將中斷，直到提示返回某些內容

但是你不能告訴你的代碼停止，就像瀏覽器在提示時所做的那樣。 在關閉打開/更新下一個模式的模式（單擊按鈕或按鍵時）時，您必須執行代碼。