2012-09-12 5 views
0

내가 무엇을하려고하는지 설명함으로써 시작하겠습니다.잠자기가 자바 스크립트 루프에 있습니까?

내 응용 프로그램은 PHP (Zend Framework) 및 Javascript를 사용하여 구현됩니다. 신청서에 대한 설문지를 만들고 싶습니다. 지금까지 다음을 수행했습니다.

내 페이지는 일련의 요소로 구성되어 있습니다. 여기서 #은 특별 질문의 색인을 나타냅니다. 예를 들어 내 HTML은 다음과 같습니다 가능한 대답하고 사용자에 질문 변경 "아니오"를 "예"또는 중 하나를 클릭해야 할 때까지

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

지금 사용자가 spesific 미리 선택된 시간 동안 각 질문을 볼 수 그가 대답이 맞다고 생각하는지에 따라. 한 번에 하나의 <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을 제거하고 다음 질문으로 설정합니다. 사용자가 클릭 한 값은 숨겨진 요소에도 저장됩니다. 이 과정은 설문지를 통해 계속 반복되어야합니다.

이제는 질문 및 답변 단계의 타이머에 대해 설명합니다. 그것들은 고정되어 있지는 않지만 각 질문마다 구체화되어 있습니다. 예를 들어 question1에는 질문/답변 시간 (초) 5/10 등이있을 수 있습니다.

이제 내 질문은 ... 자바 스크립트 측면에서 이것을 구현하는 방법 ??? 내 문제는 질문에 관한 모든 정보가 포함 된 배열을 통해 자바 스크립트에서 반복 될 때 (PHP가 서버에 설정 함) ... 클라이언트 측에서 모든 question/answer - 쌍을 반복 할 수 있어야하고 각 반복마다 사용할 수 있어야합니다. 사용자가 답변을 클릭하거나 시간이 다할 때까지 다음 반복 (다음 질문)으로 이동하지 못하도록 반복하십시오. 하지만 문제는 for 루프 나 jQuery에서 각자 잠들 수 없다는 것입니다. 내 문제가 보이십니까? :) 구현에

어떤 제안에 감사드립니다 :)

+3

는하지 마입니다 !!!!! 당신이하고 싶은 * LAST * 일은 당신의 자바 스크립트에서 "sleep"또는 "busy-wait"입니다! 이는 매우 불안한 ​​사용자에게 응답하지 않는 UI 및/또는 오버로드 된 시스템을 남깁니다. * 올바른 일은 "타임 아웃"이 발생할 때 활성화되는 "알람"을 설정하는 것입니다. 예를 들면 다음과 같습니다. http://javascript.info/tutorial/events-and-timing-depth – paulsm4

답변

5

변경은 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, questionTextquestionType과 같은 매개 변수를 입력하여 입력 필드 또는 라디오 버튼 세트를 표시하여 크기를 조절할 수 있습니다.

빠른 데모 : http://jsfiddle.net/AlienWebguy/aW9mH/

+0

조언을 해주셔서 감사합니다. – jjepsuomi

+0

'setTimeout' 메소드 제안에 대해'+ 1'. –

1

여기에 최근 실험 봤는데 그것을 할 수있는 기발한 방법의 약간이다. 나는 당신이 당신이 그것을 이해하고 있다고 확신하지 않고 이런 식으로 아무것도하지 말 것을 제안 할 필요는 없겠지만, 함께 놀아 보는 것은 깔끔합니다.

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

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

이보고 조금 이상한하지만 실험 재미 있었다.

1

자바 스크립트는 웹 사이트에 대한 재량을 받아 들일 수 있습니다.

그래서 그냥 죽어서는 안됩니다.

그냥 죽어 갈 경우 고객이 문 밖으로

관련 문제