Sleep in javascript loop?

问题

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

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:

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.

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.

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.

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.

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.

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 :)

回答1:

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();

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.

Quick demo: http://jsfiddle.net/AlienWebguy/aW9mH/

回答2:

Here's a little bit of a quirky way to do it that I've been experimenting with lately. I wouldn't necessary suggest you do anything like this without feeling confident you understand it, but it is neat to play around with.

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

It's a little odd looking, but it was fun to experiment with.