实现倒计时计时器的重置按钮

Question

作为初学者，你好人还没有学会如何编写一个好的代码，所以它不是重构的代码，它实际上是spagetti代码。无论如何，我想学习代码，所以在我的项目中（我修改某人的代码）我有两种方法来设置计时器： 1.通过单击导航菜单上的按钮，如下图所示。 2.通过输入，如下图所示。

的问题是我通话计时功能两次

reset.addEventListener('click', function() { 
    timer(mins * 60); 
    timer(seconds); 
}); 

一个快速按钮

var quickTime = function() { 
    seconds = parseInt(this.dataset.time); 
    timer(seconds); 
} 

buttons.forEach((button) => button.addEventListener('click', quickTime)); 

，一个用于输入。

buttons.forEach((button) => button.addEventListener('click', quickTime)); 
document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    mins = this.minutesSession.value; 
    displayTimerLeftSession(mins * 60); 
    timer(mins * 60); 
    this.reset(); 

}); 

它有道理，为什么它不能正常工作，因为一个覆盖另一个。我认为一个选项是检查一个快捷按钮是否具有特定的类呼叫计时器（秒），否则呼叫计时器（分钟* 60）。然而，我不知道它是否会工作，而且我不知道如何实现它，并且不知道如果确实是正确的算法，就把这个代码放在哪里。如果你知道我会很高兴听到你的建议，请。如果你可以实现它，可以自由分叉project，它会更有用。提前致谢！

Answer 1

如果我正确地理解了您的问题，您希望将复位按钮重置为启动计时器的两种方法的正确时间？

总结和快速修复：

只需添加seconds = mins * 60到您的customFormSession事件侦听器：

document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    mins = this.minutesSession.value; 
    seconds = mins * 60 
    displayTimerLeftSession(mins * 60); 
    timer(mins * 60); 
    this.reset(); 
}); 

说明：

你只是存储在一个全局变量的计时器称为seconds。此变量是为快速按钮点击事件侦听器设置的，但不适用于摘要中所述的表单提交。

说实话，我不认为你甚至需要mins变量：

document.customFormSession.addEventListener('submit', function(e) { 
    e.preventDefault(); 
    seconds = this.minutesSession.value * 60; 
    displayTimerLeftSession(seconds); 
    timer(seconds); 
    this.reset(); 
}); 

我fork of your project

Answer 2

您可以创建一个函数，该函数将超时作为参数并返回一个回调，该回调在调用时启动计时器。事情是这样的：

var createTimerCallback = function (duration) { 
    return function() { 
     // Starts a timer for the duration seconds 
    } 
}; 

你需要这个函数的返回值附加到所有的“快速”按钮：

var durations = [5 * 60, 10 * 60, 15 * 60]; // Or any other constants you need 
var buttons = ... // Your "quick" buttons 
for (var i = 0; i < duration.length; i++) { 
    buttons[i].on('click', createTimerCallback(duration[i])); 
} 

这样，持续时间得到捕获每个按键并且不改变。

您可以继续以现在的方式处理表单：从输入字段中获取分钟数，然后启动具有指定持续时间的计时器。