在javascript循环中休眠


Sleep in javascript loop?

我将首先解释我要做的是什么:)

我的应用程序是使用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. 

当回答阶段的时间用完,或者用户单击"是/否"按钮时,jQuery从当前问题中删除ACTIVE,并将其设置为下一个问题。用户单击的值也存储在隐藏元素中。这一过程应在整个调查表中重复进行。

现在是问答阶段的计时器。它们不是固定的,而是为每个问题指定的。例如,question1可能具有问题/回答时间(以秒为单位)5/10等等。

现在我的问题是…如何在javascript端实现这一点???当我在数组中循环使用javascript时,我的问题就出现了,数组包含了关于问题的所有信息(PHP在服务器中设置)。。。我应该能够迭代客户端中的所有question/answer-对,然后在每次迭代中停止迭代,直到用户点击答案或时间用完。但问题是,据我所知,我无法在jQuery中的for循环或in.each中睡觉。。。你看到我的问题了吗?:)

任何关于实施的建议都将不胜感激:)

将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秒后更改问题,依此类推,然后您可以通过输入maxTimequestionTextquestionType等参数来缩放它,以显示输入字段或一组单选按钮。

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

这里有一个我最近一直在尝试的古怪方法。我没有必要建议你在没有信心理解的情况下做这样的事情,但这很好。

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

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

Javascript的作用是使网站成为被动的NOT主动的。

所以它不应该只是死了。

如果它真的死了,你的客户就会走出家门