Javascript迭代前等待用户输入的逻辑

Question

我制作了某种类型的猜词游戏，基于向用户显示某些单词的描述并将用户输入的值与预定义的单词进行比较。我实现的逻辑如下：

1. 在全局范围内，有一个数组，里面有对象（例如 arr = [ {desc1, word1}, {desc2, word2}......]
2. 单击“开始”按钮时，我想显示第一个对象的描述（desc）。 （例如 arr[0].desc ）
3. 用户输入一些单词并按下“提交”按钮。
4. 按下“提交”时，程序会检查用户输入的单词是否与数组中的单词相同（第一次运行时为 word1）。然后，程序会根据比较结果进行随机处理。
5. 程序然后迭代到数组中的下一个对象，并继续这个直到最后一个对象。
6. 然后在迭代结束后显示最终结果。

我遇到的问题是循环猖獗 (infinte-loop) 或者不做直接进入最终结果 任何东西。

我不知道如何让程序等待/停止，直到用户输入内容并按下提交然后迭代循环。也不能使用 if-else 循环，因为除非我使用某种 setTimeout() 让用户有足够的时间输入内容，否则 else 将始终为真，但它看起来很笨重，而且只是一些创可贴的方法。

解决这类问题还有其他逻辑吗？谢谢。

Answer 1

我能想到两个简单的解决方案。

1) 使用prompt 查找检索用户输入（它会停止脚本直到用户回答）

例子：

var questions = [...]; // assuming content objects look like {word:"...", description:"..."}

for(var i in questions){
    var userInput = prompt( questions[i]["description"] ); // prompt() stops the script until user answers

    if(userInput == questions[i]["word"]){  // compare user input with value from object
        // [handle correct guess]
    } else {
        // [handle incorrect guess]
    }
}
// [Game Ended]

2) 如果不想使用提示对话框，而不是循环显示问题，我建议一次只显示一个问题，并将显示选项的索引存储在一个额外的全局变量中。在提交按钮的处理程序中，增加索引并询问下一个问题。

例子：

var questions= [ ... ];
var currentIndex = 0;

function askNextQuestion(){
    if(currentIndex < questions.length){
        var currentQuestion = questions[currentIndex];
        // [Display the question]
    } else {
        // [Game Ended]
    }
}
function start(){      // call this function from Start handler
    currentIndex = 0;  // set question index to 0
    askNextQuestion(); // ask the question
}
function submitPressed(){ // call this function from Submit handler
    // [handle answer]
    currentIndex++;      // go to next question
    askNextQuestion();   // ask the question
}