JavaScript | whileループやタイマーでの問題

私はPomodoro-esqueタイマーで作業しています。JavaScript | whileループやタイマーでの問題

「スタート」ボタンを押すと：：

スタート5秒タイマーをタイマーには次の操作を行うことができなければなりません。
タイマーの期限が切れた後、開始時刻と終了時刻を含むAJAXイベントを送信します。
3秒タイマーを開始します。
タイマーの期限が切れた後、新しい5秒タイマーを開始します。（ループステップ1〜3、合計4回）
4番目のループの最後に、7秒タイマーを開始します。
7秒タイマーが時間切れになった後、再度5-3ループを開始します。
- は、デフォルトの状態に戻ってそれをリセットし、タイマーをキャンセル：「停止」ボタンが押され
。

これは私が今持っているコードです：

HTML

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

はJavaScript：

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タイマーを作成します。最大の問題は次のとおりです。ループ内でタイマー（または間隔を同じにする）を避けます。

もう1つの問題は、startTimeがほぼ無限ループでリセットされることです。ループタイマーをstartTimerとマージすることができます。これは、基本的にタイマーを開始する1つのことで、タイマーが開始されるためです。

また、timer変数を使用して経過時間を確認します。ブラウザは指定された遅延を提供する義務を負いません（少なくともsetTimeoutの場合、MDN documentationによると、setIntervalの場合もそうです）。したがって、常に正しい時刻を持つためには、新しいDate()をインスタンス化する方が安全です。

また、いつでもこのシーケンスを変更し、またそれを介して容易にループできるように、（アレイに、IE）のどこかタイマーのシーケンスを格納するかのうです。

これらの点に続いて、私は次のようなコードを書いたでしょう。これはイラストであることを覚えておいてください。

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

JavaScript | whileループやタイマーでの問題

答えて

関連する問題