在输入输入之前浏览器崩溃

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后经过最近的机会被调用。