Javascript/jQuery—如何暂停循环的执行，直到提交表单？

我遵循以下指南： 目前，我正在努力使动态测验在该页的下一页更加详细。想法是：循环通过所有问题，对于数组中的每个问题，创建一个新表单，等待提交，处理提交的信息，然后继续下一个循环。我目前遇到了麻烦，因为我不知道如何暂停循环以等待表单提交。我该怎么做？请参阅下面的代码，特别是函数“

presentQuestion（）

”

$(document).ready(function () {

var questionArray = [
{ question: "The Netherlands", choices: ["Amsterdam", "Monaco", "Chisinau"], correctAnswer: 0 },
{ question: "Austria", choices: ["Bern", "Vienna", "Copenhagen"], correctAnswer: 1 },
{ question: "Bulgaria", choices: ["Budapest", "Sofia", "Minsk"], correctAnswer: 1 },
{ question: "Sweden", choices: ["Stockholm", "Malmo", "Gothenburg"], correctAnswer: 0 },
{ question: "Latvia", choices: ["Vilnius", "Skopje", "Riga"], correctAnswer: 2 },
{ question: "Lithuania", choices: ["Riga", "Skopje", "Vilnius"], correctAnswer: 2 }];;

var score;
var questionField = $("#questionDiv");
var tallyField = $("#tallyDiv");

$("#startButton").on("click", function () {
    resetTally();
    askQuestions();
});

$("#answerButton").on("click", function () {
    // The button from the generated question form.
    // When pressed, call evaluateAnswer() 
})

function askQuestions() {
    for (var i = 0; i < questionArray.length; i++) {
        questionField.empty();
        presentQuestion(questionArray[i]);
    }
}

function presentQuestion(q) {
    questionField.append("What is the capital of " + q.question + "?");
    questionField.append('<form method="POST">');

    for (var i = 0; i < q.choices.length; i++) {
        questionField.append(q.choices[i] + ' <input type="radio" name="answers" id="' + i + '"/></p>')
    }

    questionField.append('<input type="submit" id="answerButton" value="submit answer"/>');

    // to do: code that pauses the askQuestions() for loop
}

function evaluateAnswer() {
    // to do: take the submitted form info and evaluate the given answer. If correct, send  
    // feedback to updateTally()
}

function updateTally(givenAnswer) {
    if (givenAnswer == true) {
        // to do: increase score by 1, loop iteration ends and the next iteration 
        // in askQuestions() starts
    }
    else {
        // Same, but with a score increase of 0
    }
}

function resetTally() {
    tallyField.text("Start answering!");
    score = 0;
}

});

$（文档）.ready（函数（）{
变量数组=[
{问题：“荷兰”，选择：[“阿姆斯特丹”、“摩纳哥”、“基希讷乌]，正确答案：0}，
{问题：“奥地利”，选择：[“伯尔尼”、“维也纳”、“哥本哈根]，正确答案：1}，
{问题：“保加利亚”，选择：[“布达佩斯”、“索非亚”、“明斯克]，正确答案：1}，
{问题：“瑞典”，选择：[“斯德哥尔摩”、“马尔默”、“哥德堡]，正确答案：0}，
{问题：“拉脱维亚”，选择：[“维尔纽斯”、“斯科普里”、“里加]，正确答案：2}，
{问题：“立陶宛”，选择：[“里加”、“斯科普里”、“维尔纽斯]，正确答案：2}]；；
var评分；
var questionField=$（“#questionDiv”）；
塔利菲尔德风险值=$（“#塔利迪夫”）；
$（“#开始按钮”）。打开（“单击”，函数（）{
resetTally（）；
问问题（）；
});
$（“#应答按钮”）。在（“单击”上，函数（）{
//生成的问题表单中的按钮。
//按下时，调用evaluateAnswer（）
})
函数askQuestions（）{
对于（变量i=0；i'）
}
questionField.append（“”）；
//待办事项：暂停askQuestions（）for循环的代码
}
函数evaluateAnswer（）{
//要做的事情：获取提交的表单信息并评估给出的答案。如果正确，发送
//对updateTally（）的反馈
}
函数更新（givenaswer）{
if（givenAnswer==true）{
//要做的事情：将分数增加1，循环迭代结束，下一次迭代结束
//在askQuestions（）中，开始
}
否则{
//相同，但分数增加了0
}
}
函数resetTally（）{
文本（“开始应答！”）；
得分=0；
}
});

简短的回答是：

不要使用循环。使用javascript变量跟踪用户当前所在的测验步骤

答案很长：

1） 创建新变量以跟踪测验步骤

$(document).ready(function () {

var quizstep = 0;

var questionArray = [
{ question: "The Netherlands", choices: ["Amsterdam", "Monaco", "Chisinau"], correctAnswer: 0 },
{ question: "Austria", choices: ["Bern", "Vienna", "Copenhagen"], correctAnswer: 1 },
{ question: "Bulgaria", choices: ["Budapest", "Sofia", "Minsk"], correctAnswer: 1 },
{ question: "Sweden", choices: ["Stockholm", "Malmo", "Gothenburg"], correctAnswer: 0 },
{ question: "Latvia", choices: ["Vilnius", "Skopje", "Riga"], correctAnswer: 2 },
{ question: "Lithuania", choices: ["Riga", "Skopje", "Vilnius"], correctAnswer: 2 }];

...

2） 用下面的函数替换askQuestions函数

...
function askQuestions() {

    if(quizstep < questionArray.length)
    {
        questionField.empty();
        presentQuestion(questionArray[quizstep]);
        quizstep++;
    }
}
...

。。。
函数askQuestions（）{
if（quizstep

在您的情况下，Mysteryos的解决方案是最好的选择

但你的问题让我思考：你会如何暂停for循环

一种方法是将for循环更改为递归函数，该函数等待

promise

被

resolved（）

解析，然后再调用自身。我是这样想的：

var current = 0;
var max = 10;
var deferred = null;

function selfReferential() {
    if (current < max) {
        $("body").append("<p>"+current+"</p>");
        current += 1;
        deferred = $.Deferred();
        deferred.promise().then(selfReferential);
    } else {
        $("body").append("<p>All done!</p>");
    }
}


selfReferential();


    // Somewhere else in your code...

    if (deferred && deferred.state() == "pending") {
        deferred.resolve();
    }

var电流=0；
var max=10；
var=null；
函数自引用（）{
如果（电流<最大值）{
$（“正文”）。追加（“”+当前+”
”；
电流+=1；
递延=$.deferred（）；
deferred.promise（）.then（selfReferential）；
}否则{
$（“正文”）。追加（全部完成！
）；
}
}
自指（）；
//在代码的其他地方。。。
if（延期和延期状态（）=“待定”）{
延迟。解决（）；
}

这是一个很好的例子

---

如果您想了解更多关于承诺的信息，可以查看。

我想

谢谢，这就是我需要的。而且，对于像我这样的初学者来说，看到即使是专业人士有时也会犯使用错误，这也是非常令人欣慰的