在 jQuery/javaScript 中遍历对象数组（时间相关的迭代）答案

【问题标题】：Iterate through array of objects (time dependent iteration) in jQuery/javaScript在 jQuery/javaScript 中遍历对象数组（时间相关的迭代）
【发布时间】：2014-08-15 18:57:11
【问题描述】：

我是 javaScript 和 jQuery 的初学者。我想创建一个只有两个选项的问答游戏。

我有一个如下所示的对象数组：

  var question = [];

    question[0] = {

        value: "someText here",
        ans: true
    };

我将把我所有的问题写成这个对象的数组。这是一个纯粹基于乐趣的游戏，所以如果用户打开源代码并阅读问题就没有问题。我想用 jQuery 来展示这个问题。为了展示，我写了这个：

$("#someID").text(question[i].value); // where i is some random variable

然后我可以调用 .click 方法并检查用户单击了哪个按钮，然后相应地处理情况（更改分数、减少生命等）。现在，我想根据时间遍历这个对象数组，这意味着，每个问题都会在屏幕上停留 15 秒左右，如果用户按下两个按钮中的任何一个，那么下一个问题会立即出现，其他参数是相应地改变了。但是，如果用户在 15 秒内没有按任何按钮，则会出现下一个问题。我该怎么做？

在发布这个问题之前我所做的努力：

Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

此链接上的第一个答案告诉我一些与我想要实现的目标相近的东西，但它将其数据放在<p> 标记中，这是我不想要的。我严格希望将其保留为对象数组。有没有办法做到这一点？非常感谢。

编辑------

score=0; // variable to store the score of the user.
counter=0;



$(function () {
    fetchNextQuestion(); 

});

function fetchNextQuestion() {

    counter++;
    if (counter >= 5) {
        endTheGame();
    }
    else {

        number = Math.floor(Math.random() * 10);
        $("#timer").text(question[number].value);
        _qtimer = setInterval(fetchNextQuestion(), 15000);
        userHasDoneSomething();
    }
}

function userHasDoneSomething() {

    $("#true").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === true) {
            score++;
        }
        else {
            score--;
        }

        fetchNextQuestion();
    });

    $("#false").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === false) {
            score++;
        }
        else {
            score--;
        }
        fetchNextQuestion();
    });


    return;



}



function endTheGame() {
    alert("The game has ended! Your score is "+ score);
}

不幸的是，这段代码对我不起作用。它只是给了我一个警告框，并且屏幕上的问题没有改变。我错了的任何原因？注意：Web 控制台中没有错误。

编辑#2--- 这是我的 HTML ..

<!DOCTYPE html>
<html>
<head>
    <title>Serious or Joking</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="timer">
        <p>00</p>
    </div>


    <input type="button" value="true" class="answer" id="truebutton" />
    <input type="button" value="false" class="answer" id="falsebutton"/>


</body>
</html>

我在 Visual Studio 中工作。

【问题讨论】：

你能告诉我们你到目前为止的情况吗？没有它，我们无法真正帮助您解决问题
从您的问题看来，如果用户在 15 秒内没有点击，您似乎只需将 [i] 索引更改为下一个问题。对吗？
@webkit 是的，没错。
从setInterval(fetchNextQuestion, 15000); 中删除() 你想传递一个回调函数，而不是立即初始化它......

标签： javascript jquery arrays

【解决方案1】：

据我了解，您只需要一个间隔..

编辑：这是使用您的代码的更新：

var score=0, // variable to store the score of the user.
    counter=0;
    $(function () {
        fetchNextQuestion(); 
    });

    function fetchNextQuestion() {
        counter++;
        if (counter >= 5) {
            endTheGame();
        }
        else {
            number = Math.floor(Math.random() * 10);
            $("#timer").text(question[number].value);
            _qtimer = setInterval(fetchNextQuestion, 15000);
            $(".answer").off().on('click', userHasDoneSomething);
        }
    }

    function userHasDoneSomething() {
        clearInterval(_qtimer);
        if (Boolean(question[number].ans) == Boolean(this.value))    score++;
        else                                    score--;

        fetchNextQuestion();
    }
    function endTheGame() {
        alert("The game has ended! Your score is "+ score);
    }

注意：为您的#true 和#false 元素赋予相同的类 (.answer)

【讨论】：

请阅读我对问题所做的编辑（根据您的回答）。谢谢。
当然，我认为问题是必须在事件发生时调用 userHasDoneSomething()。我会更新我的答案，看看它是否适合你
我认为您还想从setInterval(fetchNextQuestion, 15000); 代码行中删除()。您想提供一个回调函数，而不是立即初始化该函数...
@user3763293 War10ck的最后一条评论可能是导致它的原因，注意上面代码的变化（删除了（））并重试..让我知道结果
是的，我正在检查您的 id 是否为真/假.. 看到您的 html 后，我会将其更改为值.. 我已经更新了我的答案。请注意，我只将 this.id 更改为 this.value