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

Question

大家好，作为一名初学者，我还没有学会如何编写好的代码，所以它不是重构的代码，它实际上是意大利面条代码。不管怎样，我想学习编码，所以在我的项目中(我修改某人的代码)我有两种方法来设置计时器: 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)。但是我不确定它是否有效，而且我不知道如何实现它，并且不知道如果它确实是正确的算法，则将该代码放在哪里。如果您知道，我会很高兴听到您的建议。如果你能实现它，请随意 fork 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();
});

说明:

您只需将计时器存储在名为“秒”的全局变量中。此变量是为您的快速时间按钮单击事件监听器设置的，但不是为摘要中所述的表单提交设置的。

说实话，我认为您甚至不需要 mins 变量:

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

我的fork of your project