范围问题？Javascript 计时器不接受新的倒计时值

Question

我正在构建一个倒数计时器，可以在两个会话值之间交替，一个主会话 和休息会议。 我一直在通过count_down功能。 我无法解决的问题是，在最后 会话我无法让计时器识别新的current_time值来倒计时; 计时器继续保持前一个值并计入负数 承认新的价值。

我已经确认新值已通过以下方式更新到 DOMconsole.log(current_time)并且新的价值时间被认可。 这个新时间只是没有被 定时器。

我尝试通过counting=null和counting=false将计时器 obejct 设置为空。 我 尝试了计时器对象的内部reset函数，并尝试设置新的计时器，但可能不正确。我认识到这是一个范围问题，因为计时器正在保留 从初始开始的倒计时值。 我阅读了这些涉及范围的帖子; 一、二、 三，和 决定这个 尝试将所有定时函数保留在 单个定时对象。

显示计时器倒计时并过渡到第二个计时的最佳方法是什么 完成间隔？任何帮助将不胜感激。 谢谢。

这是最后的努力：

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