Question

听起来很复杂，但请耐心等待。我想在PHP / JS / Jquery中制作一个简单的游戏。正在以JSON格式从数据库中检索数据。这是一系列问题，提示，答案和正确的答案。

我想在一个php页面上逐一呈现所有问题。用户可以点击任何按钮，当他/她点击正确答案时，会显示绿色复选标记。分数已更新。显示下一个问题，依此类推。如果用户在尝试所有4个按钮之前时间不足，则会显示红叉，分数保持不变。显示下一个问题。

现在，我可以遍历问题，但我不能等待用户输入，因为JS是异步的，所以我必须添加回调。我想不出一种方法来编码，以便在不影响正确答案的情况下简化验证。

以下是一些从db获取数据的准系统代码，并使用常规循环，没有回调。我该怎么调整它才能让它做我想做的事？

// Global variables
var QNAData = null;
var currentQuestionIndex = null;

$(document).ready(function(){
    // Get question & answer data from the db
    function reqListener () {

        QNAData = jQuery.parseJSON(this.responseText);
        StartGame(QNAData);
    }

    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", reqListener);
    oReq.open("GET", "GetNewGameData.php", true);
    oReq.send();

}); // end document.ready


function StartGame(QNAData)
{

            // Loop through the questions
           for (stageIndex=0; stageIndex < QNAData.length; stageIndex++) {

               currentQuestionIndex = stageIndex;
               // Populate the Question and Answer text containers
               $("#QuestionTextContainer").html(QNAData[stageIndex]['QuestionText']);
               $('#QuestionShortHintContainer').text(QNAData[stageIndex]['QuestionHintShort']);
               $('#QuestionLongHintContainer').text(QNAData[stageIndex]['QuestionHintLong']);
               $("#Answer1TextContainer").html(QNAData[stageIndex]['AllAnswersText'][0]);
               $("#Answer2TextContainer").html(QNAData[stageIndex]['AllAnswersText'][1]);
               $("#Answer3TextContainer").html(QNAData[stageIndex]['AllAnswersText'][2]);
               $("#Answer4TextContainer").html(QNAData[stageIndex]['AllAnswersText'][3]);


     // Set up the countdown timer after the answers have been displayed
     $('#countdown-container').hide().fadeIn().ClassyCountdown();
    }

Answer 1

首先，仅使用一个问题并更改文本和答案非常麻烦。我建议为所有问题构建HTML，并仅显示当前的问题（通过JS控制）。只需控制可见性而不是不断更新文本和值，您的生活将变得更加容易。这也可以帮助您在用户点击答案时不更改值和文本，因为HTML不同。

其次，JS中的回调无法解决。接受。你需要点击处理程序，更改处理程序，超时处理程序，ajax处理程序，所有回调。

至于用户超时问题，我的方法如下：

您想使用setTimeout。在其回调函数上，使其成为显示超时交叉的函数。

它的返回值是一个处理程序，您可以将其存储在变量中。如果用户按下按钮检查答案，或者转到其他问题，您可以使用clearTimeout并传递存储的超时，以便它不会运行。然后为显示的新问题创建一个新的。

如何根据用户输入和放大器在Javascript中使用循环更新UI？计时器？

1 个答案: