输入输入前浏览器崩溃

Browser Crashes before Input is Entered

本文关键字：输入 崩溃 浏览器      更新时间：2023-09-26

我正在用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;
}

如果这不是一个简单的解决方案。。。监控输入并响应正确答案的更好方法是什么？

谢谢，我知道这是一个有点宽泛的问题，但我很难弄清楚我在找什么。

Javascript已经在后台运行了一个事件循环，所以您不需要自己的循环。这个循环持续运行，并检查是否有任何事件在任何HTMLDOM元素上触发。例如，如果单击了某个按钮，则事件循环将拾取该元素的单击事件。您可以将事件处理程序添加到元素中，这些事件处理程序是在该元素发生某些事件时激发的函数。您要做的是为事件设置一个事件处理程序，每当您的输入区域中的文本（我假设用户正在键入输入或文本区域标记）被激发时，该事件就会激发。

例如，下面的简单程序将创建一个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;}
 }

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

作为一种文体注释，通常在使用变量之前声明和初始化变量，而不是在程序开始时。

您可以使用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中的函数将在经过5000ms后的最近时机被调用。

相关文章：