Question

我首先要解释一下我正在尝试做什么：）

我的应用程序是使用PHP（Zend框架）和Javascript实现的。我想为我的申请做一份调查问卷，到目前为止我已经完成了以下工作：

我的页面由一系列<div class='question #'>个元素组成，其中＃表示特定问题的索引。例如，我的HTML看起来像这样：

<div class="question 1 active">
</div>
<div class="question 2">
</div>
<div class="question 3">
</div>
.
.
.
etc.

现在，用户应该看到特定预选时间的每个问题，直到问题变为可能的答案，并且用户应该单击“是”或“否”，这取决于他是否认为答案是正确的。一次只有一个<div class="question #"> - 元素处于活动状态，其他元素具有display:none;。在问题更改为下一个问题后，active - 属性将从当前问题中删除并设置为下一个问题，以便用户循环遍历所有问题。

对于每个question/possible answer - 对，我将两个整数关联起来，这些整数表示用户有时间查看问题以及用户有多长时间回答问题。让我举个例子：

用户看到这个（或多或少）：

QUESTION 1/10

The name of the President of U.S.? -------------- 5 sec 
..
The name of the President of U.S.? -------------- 4 sec
..
The name of the President of U.S.? -------------- 3 sec
..
etc. THE TIME ENDS and the question changes to answer mode(buttons YES/NO appear also in this part):

Bruce Wayne? ------------------------------7 sec 
 [YES] [NO]  
...
Bruce Wayne? ------------------------------6 sec 
 [YES] [NO]  
...
Bruce Wayne? ------------------------------5 sec 
 [YES] [NO]  
...
etc.

当ANSWER阶段的时间用完或者用户点击任一按钮时YES / NO jQuery从当前问题中删除ACTIVE并将其设置为下一个。用户单击的值也存储在hidden-element中。这个过程应该一直通过问卷重复。

现在关于问答阶段的计时器。它们不是固定的，而是针对每个问题加以说明。例如，question1可能有问题/答案时间（以秒为单位）5/10等等。

现在我的问题是......如何在javascript端实现这个？我的问题出现在我通过数组循环javascript，其中包含有关问题的所有信息（PHP在服务器中设置）...我应该能够在客户端迭代所有question/answer - 对然后在每次迭代时停止迭代从移动到下一个（下一个问题），直到用户点击了答案或时间已用完。但问题是因为我明白我不能在for循环中或在jQuery中的每个中睡觉......你看到我的问题了吗？ :)

有关实施的任何建议都表示赞赏：）

Answer 1

将for循环更改为通过setTimeout

调用的递归函数

var timeLeft = 10,
    countdown = function(){
        $('#mySpan').html('The name of the President of U.S.? -------------- ' + timeLeft + ' sec');
        timeLeft -= 1;

        if (timeLeft) {
            setTimeout(countdown, 1000);
        }
    };

countdown();

采用这种逻辑，您可以将其扩展为在X秒后改变您的问题，依此类推，然后您可以通过参与maxTime，questionText和{{1}等参数来扩展它例如，显示一个输入字段或一组单选按钮。

快速演示：http://jsfiddle.net/AlienWebguy/aW9mH/

Answer 2

这是我最近一直在尝试的一种奇特的方式。我没有必要建议你做这样的事情而不要有信心你理解它，但是它很好玩。

function countdown(loops, pause, id) {
    (function setup(timer, el, text) {
        (function loop(invalid) {
            (function check(stop) {
                return stop || !loops-- || timer(loop, pause);
            })(invalid || !loops, el[text] = loops);
        })(!loops || !pause);
    })(setTimeout, document.getElementById(id) || {}, 'innerHTML');
}

countdown(10, 1000, 'timer');

http://jsfiddle.net/userdude/ghN3m/1

看起来有点奇怪，但试验很有趣。

Answer 3

Javascript可以使网站被动不主动。

所以它不应该只是死了。

如果它真的死了，你的客户出门

在javascript循环中睡觉？

3 个答案: