자바 스크립트 | while 루프 및 타이머의 어려움

나는 Pomodoro-esque 타이머로 작업하고 있습니다. 타이머는 다음을 수행 할 수 있어야합니다자바 스크립트 | while 루프 및 타이머의 어려움

시작 오초 타이머 : '시작'버튼을 누르면
. 시간은 물론 변경 될 것입니다.
타이머가 만료 된 후 시작 및 종료 타임 스탬프가 포함 된 AJAX 이벤트를 보내십시오.
3 초 타이머를 시작하십시오.
타이머가 만료 된 후 새로운 5 초 타이머를 시작하십시오. (루프 단계 1에서 3까지 총 4 번)
네 번째 루프가 끝나면 7 초 타이머를 시작합니다.
7 초 타이머가 만료 된 후 5-3 루프를 다시 시작하십시오.

은 '정지'버튼을 누르면 :

는, 타이머를 취소 다시 기본 상태로 재설정.

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Pomodoro Test</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
<div id="test"></div> 
<div id="timer">5</div> 

<button id="start">Start</button> 
<button id="reset">Reset</button> 

<div id="startTime"></div> 
<div id="endTime"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="functions.js"></script> 
</body> 
</html>

자바 스크립트

HTML :

이 내가 지금 가지고있는 코드 나는 그것이 매우 어려운 원하는 기능을 얻을 찾을

var timer = 5; 
var flag = 0; 
var startTime; 
var endTime; 
var intervalTimer; 

function update() { 
    if (timer-- > 0) { 
    $("#timer").html(timer); // retrieve value from html 
    } else { 
    endTime = new Date(); 
    //alert("Start Time = " + startTime + "\nEnd Time = " + endTime); 
    $("#endTime").html("End time: " + endTime.toTimeString()); 
    resetTimer(); 


    // TODO: send ajax call to server, sending startTime and endTime 
    // so that these can be saved to database 

    } 
} 
function loopingTimer() { 
    while(flag === 0) { 
    startTime = new Date(); 
    $("#startTime").html("Start time: " + startTime.toTimeString()); 
    startTimer(); 
    i++; 
    setTimeout(function() { 
    if(i < 5) { 
     loopingTimer(); 
    } 
    }, 3001)}}; 

$("#start").click(function() { 
    loopingTimer(); 
}); 

$("#reset").click(function() { 
    flag = 1; 
    }); 



function startTimer() { 
    intervalTimer = window.setInterval(update, 500); 
} 

function resetTimer() { 
    stopTimer(); 
    timer = 5; 
    $("#timer").text(timer); 
} 

function stopTimer() { 
    window.clearInterval(intervalTimer); 
}

, 내가 봤는데 이 코드로 2 일 동안 꾸미기. 진심으로 당신이 나를 도울 수 있기를 바랍니다.

케이크.

출처

2016-06-11 Cake

while 루프의 loopingTimer 함수에서 간체 않습니다

while (userDidntStop) { 
    startTimer(); 
}

브레이크 조건은 사용자가 버튼을 클릭이다. 사용자가 500 회 반복 (아주 짧은 시간) 후에 이렇게하면이 루프는 약 500 개의 타이머를 생성합니다. 가장 큰 문제는 다음과 같습니다. 루프 내에서 타이머 또는 간격을 동일하게 실행하지 마십시오.

또 다른 문제는 startTime이 거의 무한 루프에서 재설정된다는 것입니다. loopingTimer를 startTimer와 병합 할 수 있습니다. 이는 기본적으로 타이머를 시작하는 하나의 작업을 수행하므로 차단됩니다.

또한변수를 사용하여 경과 시간을 확인합니다. 브라우저는 지정된 지연을 제공 할 의무가 없습니다 (적어도 setTimeout에 대해 MDN documentation에 따르면. setInterval의 경우도 마찬가지라고 생각합니다). 따라서 항상 올바른 시간을 갖기 위해 새로운 Date()을 인스턴스화하는 것이 더 안전합니다.

또한 타이머 순서를 어딘가에 (즉, 배열로) 저장하고 언제든지이 순서를 수정할 수 있으며 쉽게 반복 할 수 있습니다.

이 내용을 따르면 다음과 같은 코드를 작성했을 것입니다.이것은 일러스트레이션임을 기억하십시오. 원하는 동작을 생성하지 않을 수도 있습니다.

var timeLoop = [5, 3, 5, 3, 5, 3, 5, 3, 7]; // seconds 
var timeIterator = timeLoop.length; 
var startTime; 
var endTime; 
var intervalTimer; 

function sendTimer() { // once the timer ends, send it 
    // send AJAX request with startTime and endTime here 
} 

function updateTimer() { // main timer loop 
    var now = Date.now(); // make sure you have the right time 
    var diff = endTime - now; 
    if (diff <= 0) { // if endTime is past, stop and send the timer 
     diff = 0; 
     clearInterval(intervalTimer); 
     sendTimer(); 
    } 
    // Update the displayed time using diff (ms) 
} 

function resetTimer() { // to call on $("#reset").click 
    if (endTime > Date.now()) { 
     endTime = Date.now(); 
     updateTimer(); // reset the displayed time, and stop updateTimer 
     // note that this will call sendTimer() with the _aborted_ time 
    } 
} 

function startTimer() { // to call on $("#start").click 
    resetTimer(); 
    // We will loop throught the timeLoop every time we start the timer 
    if (timeLoop.length < ++timeIterator) { 
     timeIterator = 0; 
    } 
    startTime = Date.now(); 
    endTime = startTime + 1000 * timeLoop[timeIterator]; 
    intervalTimer = setInterval(updateTimer, 500); 
}

출처

2016-06-11 14:55:45 GnxR

제 질문에 답변 해 주셔서 감사합니다. 나는 내 깊이에서 조금 벗어난다. 나는 HTML로 타이머를 어떻게 업데이트 할 수 있을지 모르겠다. startTimer를 시작 버튼에 묶었지만 클릭하면 아무 일도 일어나지 않습니다. html에 대한 정보를 mm : ss 형식으로 표시 할 수 있습니까? – Cake

내가 불분명하면 죄송합니다. 이 코드는 실제로 HTML 문서에는 아무런 영향을 미치지 않으며 타이머 사용만을 보여줍니다. jQuery 코드에 따라 HTML 요소를 업데이트 할 수 있다고 생각합니다. 남은 시간 (ms)은'updateTimer'에'diff'에 의해 저장됩니다; 시간 형식에 대해서는 [이 질문] (http://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript)을 참조하십시오 (초에서'diff'를 나눠야합니다. 1000). – GnxR

굉장합니다. 시간 내 주셔서 감사합니다. – Cake

자바 스크립트 | while 루프 및 타이머의 어려움

답변

관련 문제