スコープの問題？ Javascriptタイマーは新しいカウントダウン値を受け入れません

Question

私は、メインセッション とブレークセッションの2つのセッション値を交互に入れ替えるカウントダウンタイマーを作成しています。私は count_downの機能を通してDOMディスプレイに値を保存しています。私が解決できなかった問題は、 セッションの最後に、新しいcurrent_timeの値をカウントダウンするタイマーを得ることができません。 タイマは以前の値を保持し続け、新しい値を認識する代わりに の代わりに負の数にカウントします。

私は、新しい値がconsole.log(current_time) によってDOMに更新され、その新しい値の時刻が認識されることを確認しました。この新しい時間は、 タイマーによってカウントに組み込まれるだけではありません。

私はcounting=nullとcounting=falseを通してヌルにタイマobejctを設定しようとしました。 I は、タイマオブジェクトの内部のreset関数を試して、新しいタイマーを設定しようとしましたが、正しくはない可能性があります。タイマーが最初の開始からのカウントダウン値を 保持しているので、これは範囲の問題であると認識しています。私は範囲を扱ったこれらの投稿を読んでいます。 one、two、 three、および は試してみて、 単一のタイミングオブジェクトにタイミング機能のすべてを維持するために、このone を決めました。

タイマーからのカウントダウンを表示し、完了時に第2のタイミング 間隔に切り替える最も良い方法は何ですか？どんな助けでも大歓迎です。ありがとうございました。ここで

は最後の努力です：

//Timer object 
function Current_Countdown(count_down){ 
    var timerObj; 

    this.pause = function(){ 
    if (timerObj){ 
     clearInterval(timerObj); 
    } 
    return this; 
    } 

    this.stop = function(){ 
    if (timerObj){ 
     clearInterval(timerObj); 
     timerObj = null; 
    } 
    return this; 
    } 

    this.start = function() { 
    if (!timerObj){ 
     this.stop(); 
     timerObj = setInterval(count_down, 1000); 
    } else { 
     timerObj = setInterval(count_down, 1000); 
    } 
    } 

    this.reset = function(){ 
    this.stop().start(); 
    } 
} 

function pause_count_down(){ 
    counting.pause();; 
} 

//calls the actual countdown function 
function current_count_down(){ 
    if (!counting){ 
    counting = new Current_Countdown(count_down); 
    counting.start(); 
    } else { 
    counting.start(); 
    } 
} 

//performs the countdown and updates the DOM by sending values to display 
function count_down(){ 
    curr_time = document.getElementById("current_time").value; 
    var min_sec_split = curr_time.match(/:/); 
    var min_sec_index = curr_time.indexOf(min_sec_split); 
    var minutes = parseInt(curr_time.substring(min_sec_index, 0)); 
    var seconds = parseInt(curr_time.substring(min_sec_index + 1)); 
    console.log(minutes); 
    console.log(seconds); 

if (seconds == 0 && minutes == 0) { 
    console.log("in final test"); 
    main_control(); 
} 
if (seconds == 0) { 
    seconds = 60; 
    minutes -= 1; 
} 

seconds -= 1; 

if (seconds < 10){ 
    seconds.toString(); 
    seconds = "0" + seconds; 
} 

if (seconds >= 0) { 
    display_time(minutes, seconds); 
} 
}; 

//function to transition between session interval and break interval and back 
function main_control(){ 
    var session = document.getElementById("session_number").value; 
    var current_time = document.getElementById("current_time").value; 
    var break_time = document.getElementById("break_time").value; 
    var session_time = document.getElementById("interval_time").value; 

    in_break = !in_break; 
    console.log("in_break value: ", in_break); 

    counting = false; 

    if (in_break){ 
    console.log("passed display time"); 
    display_time(break_time, "00"); 

    } else { 
    document.getElementById("session_number").value = parseInt(session) + 1; 
    display_time(session_time, '00'); 
    } 
    current_count_down(); 
} 

function display_time(minutes, seconds){ 
    var min = minutes.toString(); 
    var sec = seconds.toString(); 
    var curr_time = min + ":" + sec; 
    console.log("current time is ", curr_time); 
    document.getElementById("current_time").value = curr_time; 
} 

はあなたの時間とあなたの助けをいただき、ありがとうございます。

Answer 1

タイマー終了後、count_down関数から抜け出す必要があります。

if (seconds == 0 && minutes == 0) { 
    console.log("in final test"); 
    main_control(); 
    return; // This is the fix. 
} 

以下のコードは動作例です。私はあなたのコードを使用しただけではありませんが、不要なコードが多すぎると感じました。

var $currentTime = document.getElementById('current-time'); 
 
var $sessionNumber = document.getElementById('session-number'); 
 
var $currentTime = document.getElementById('current-time'); 
 
var $breakTime = document.getElementById('break-time'); 
 
var $sessionTime = document.getElementById('session-time'); 
 

 
var inBreak = false; 
 
var timer = new Timer(); 
 

 
function Timer() { 
 
    var timer; 
 

 
    this.start = function() { 
 
    this.stop(); 
 
    timer = setInterval(countdown, 1000); 
 
    } 
 

 
    this.stop = function() { 
 
    if (timer) { 
 
     clearInterval(timer); 
 
     timer = null; 
 
    } 
 
    } 
 
} 
 

 
// Performs the countdown and updates the DOM by sending values to display 
 
function countdown() { 
 
    var currentTime = $currentTime.value.split(':'); 
 
    var minutes = parseInt(currentTime[0]); 
 
    var seconds = parseInt(currentTime[1]); 
 

 
    if (seconds == 0 && minutes == 0) { 
 
    mainControl(); 
 
    return; // This line is your fix. 
 
    } 
 

 
    if (seconds == 0) { 
 
    seconds = 60; 
 
    minutes -= 1; 
 
    } 
 

 
    seconds -= 1; 
 

 
    if (seconds < 10) { 
 
    seconds = '0' + seconds; 
 
    } 
 

 
    if (seconds >= 0) { 
 
    displayTime(minutes, seconds); 
 
    } 
 
}; 
 

 
// Function to transition between session interval and break interval and back 
 
function mainControl() { 
 
    var sessionNumber = $sessionNumber.value; 
 
    var currentTime = $currentTime.value; 
 
    var breakTime = $breakTime.value; 
 
    var sessionTime = $sessionTime.value; 
 

 
    inBreak = !inBreak; 
 

 
    if (inBreak) { 
 
    displayTime(breakTime, '00'); 
 

 
    } else { 
 
    $sessionNumber.value = parseInt(sessionNumber) + 1; 
 
    displayTime(sessionTime, '00'); 
 
    } 
 

 
    timer.start(); 
 
} 
 

 
function displayTime(minutes, seconds) { 
 
    $currentTime.value = minutes + ':' + seconds; 
 
} 
 

 
document.getElementById('start').addEventListener('click', function() { 
 
    mainControl(); 
 
});

<label>Session number: </label><input id="session-number" value="0"><br> 
 
<label>Session timer: </label><input id="session-time" value="1"><br> 
 
<label>Break timer: </label><input id="break-time" value="1"><br> 
 
<label>Current time: </label><input id="current-time" value="00:10"><br> 
 
<button id="start">Start</button>