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

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

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

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])); 
}

这样，每个按钮捕获的持续时间都不会改变。

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

Answer 2

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

摘要和快速修复：

只需将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