在輸入輸入之前瀏覽器崩潰

Question

我正在寫一個JavaScript應用程序，它應該是一個快節奏的打字挑戰。問題是我的腳本正在檢查輸入是否會在輸入任何內容之前崩潰瀏覽器。我認爲它會暫停等待輸入，但似乎我可能是錯的？

這裏是崩潰我的瀏覽器功能：

var level1 = function() { 

var letter; 
var ascii; 
var ncorrect = 0; 
var input = "0"; 
var timedout = false; 

document.getElementById('prompt').text = "Level 1 : Type Here!" // this is supposed to change text on the page... It doesn't work but not that's not my question. 

while (ncorrect < 26){ 

    timedout = false; 
    setTimeout(timedout = true, 5000); 
    ascii = Math.floor(Math.random() * 122) + 97; // ASCII's of lower case letters 
    letter = String.fromCharCode(ascii); 
    document.getElementById('letter').text = letter; 

    input = document.getElementById('keyinput'); 
    console.log(input); 

    if(!timedout && input === letter) { 
     clearTimeout(); 
     ncorrect++; 
    } 
    else { 
     ncorrect = 0; 
    } 
} 

return 0; 

} 

如果它不是一個簡單的解決... 什麼是監控輸入和響應一個正確答案的一個更好的辦法？

謝謝，我知道這是一個有點廣泛的問題，但我努力弄清楚我在找什麼。

Answer 1

Javascript已經在後臺運行一個事件循環，所以你不需要你自己的。此循環連續運行，並檢查是否有任何事件對任何HTML DOM元素觸發。例如，如果點擊了按鈕，事件循環將爲該元素選擇一個點擊事件。您可以向元素添加事件處理程序，這是在發生某些事件時觸發的功能。你想要做的是爲事件設置一個事件處理程序，只要輸入區域中的文本（我假設用戶輸入的是輸入或textarea標記）就會被觸發。

例如，下面的程序將創建一個打字挑戰100個隨機字符長

var ncorrect = 0; 
var timedout = false; 
//select an empty paragraph to fill with text 
var challengeText = document.getElementbyId("challengeText"); 
challengeText.innerHtml = ""; 
//Append 100 random characters to the paragraph 
for (var i=0;i<100;i++) { 
    challengetText.innerHtml += String.fromCharCode(Math.floor(Math.random() * 122) + 97); 
} 

//Check the number of characters typed since the last the loop hit the element 
var lastCharsTyped = 0; 
var charsTyped = 0; 

//Grab the user input 
var input = document.getElementById("userInput") 

//Set the event handler to fire when the user presses a key (technically, when they lift their finger 
input.onkeyup = function(keyEvent){ 
    //Ugly ternary to deal with the fact that not all browsers use the same api. If you haven't seen this before it means if which is a key of keyEvent then keyCoe is event.which, otherwise it's event.keyCode 
    var keyCode = ('which' in keyEvent) ? keyEvent.which : keyEvent.keyCode; 
    //Check if the key pressed is equal to the character in the text to match at the same position 
    if (keyCode === challengeText.innerHtml.charCodeAt(input.value.length)) { ncorrect ++} else {ncorrect = 0;} 
} 

它不會處理刪除或轉移非常優雅，但它應該給你方向的主意，採取。

作爲一種文體筆記，它習慣於在使用它們之前聲明和初始化變量，而不是在程序開始時。

Answer 2

您可以使用setTimeout()並傳入一個函數，在您指定的任意時間後檢查輸入。下面是實現這個的一種方式：

setTimeout(function() { 
 
    var textbox = document.getElementById('textbox'); 
 
    if (textbox.value !== 'The quick brown fox jumps over the lazy dog.') { 
 
     alert('You didn\'t pass.'); 
 
    } else { 
 
     alert('Congratulations!'); 
 
    } 
 
}, 5000);

Type in the phrase "The quick brown fox jumps over the lazy dog." 
 
<input type="textbox" id="textbox"></input>

setTimeout傳遞函數表達式來檢查用戶輸入，並吐出根據自己的打字實力警報。第二個參數5000意味着傳遞到setTimeout的函數將在5000 ms後經過最近的機會被調用。