睡在javascript循环中吗? [英] Sleep in javascript loop?

问题描述

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

I'll start by explaining what is it that I'm trying to do :)

我的应用程序是使用PHP(Zend框架)和Javascript实现的.我想为自己的应用做一份调查表，到目前为止，我已经完成了以下工作:

My application is implemented using PHP (Zend framework) and Javascript. I want to make a questionnaire for my application and so far I have done the following:

我的页面由一系列<div class='question #'>元素组成，其中#表示特殊问题的索引.例如，我的HTML如下所示:

My page consists of series of <div class='question #'> elements where # denotes the index of the spesific question. For example my HTML looks like this:

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

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

Now the user should see each question for a spesific pre-selected time until the question changes into the possible answer and the user should click either "Yes" or "No" depending if he thinks the answer is correct. Only one <div class="question #">-element is active at a time, the others have display:none;. After the question is changed to the next one, the active-attribute is removed from the current question and set to the next one so the user loops through all the questions.

对于每个question/possible answer对，我关联了两个整数，它们分别说明用户有多长时间看到问题以及用户有多长时间回答问题.让我举个例子:

With each question/possible answer-pair I have associated two integers which spesify how long the user has time to see the question and how long the user has time to answer the question. Let me give an example:

用户看到了(或多或少):

The user sees this (more or less):

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并将其设置为下一个.用户单击的值也存储在隐藏元素中.在整个问卷调查过程中都应重复此过程.

When either the time runs out in the ANSWER-phase OR the user clicks either of the buttons YES/NO jQuery removes ACTIVE from current question and sets it to the next one. The value the user clicked is also stored in hidden-element. This process should be repeated all the way through the questionnaire.

现在介绍问题和答案阶段的计时器.它们不是固定的，而是针对每个问题而具体化的.例如，question1可能具有问题/答案时间(以秒为单位)5/10，依此类推.

Now about the timers of both the question and answer phase. They are NOT fixed but spesified for each question. For example question1 might have question/answer times (in seconds) 5/10 and so forth.

现在我的问题是...如何在javascript端实现此目标???当我遍历包含有关问题的所有信息(PHP在服务器中设置)的数组时，我的问题就来了……我应该能够遍历客户端中的所有question/answer对，然后每次迭代都会停止迭代前进到下一个问题(下一个问题)，直到用户单击答案或时间用完为止.但是问题是，据我了解，我无法在for循环或jQuery中的.each中睡眠...您看到我的问题了吗? :)

Now my question is...how to implement this in the javascript side??? My problem comes in when I loop in javascript through the array which contains all the information regarding the questions (which PHP sets in server)...I should be able to iterate through all question/answer-pairs in client-side and then on each iteration stop the iteration from moving on to the next one (next question) until the user has clicked answer or the time has run out. But the problem is as I understood that I CANNOT sleep in the for-loop or in .each in jQuery...Do you see my problem? :)

任何对实施的建议表示赞赏:)

Any suggestions on implementation appreciated :)

推荐答案

将for循环更改为通过setTimeout调用的递归函数

Change the for loop to a recursive function called via a 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和questionType之类的参数来显示输入字段，从而对其进行缩放或一组单选按钮.

Take that logic and you can extend it to change your question after X seconds and so on, and then you can scale it by taking in parameters like maxTime, questionText, and questionType to display an input field or set of radio buttons for example.

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

这篇关于睡在javascript循环中吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！