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

您可以使用setTimeout()并传入一个函数，该函数会在您指定的任何时间后检查输入。以下是实现此目的的一种方法：

＆＃13;

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);

＆＃13;

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

＆＃13;

setTimeout传递一个函数表达式，该表达式检查用户输入并根据其输入功能发出警报。第二个参数5000表示传递到setTimeout的函数将在5000毫秒过后在最近的机会调用。

Answer 2

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;}
 }

它不会处理删除或移动非常优雅，但它应该让你知道要采取的方向。

作为一种风格说明，它习惯于在使用变量之前声明和初始化变量，而不是在程序开始时。

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

2 个答案: