Javascript 变量不会更新番茄时钟

Question

所以，我正在尝试制作一个番茄时钟，但我的变量无法更新而遇到问题。我创建了按钮，单击这些按钮会增加或减少工作时间变量，但是当我调用 startTimer 函数时，我的变量 workTime 仍然是最初设置的原始值。如何使我的变量更新到正确的数量。

这是我的 Codepen 的链接。 http://codepen.io/jerardov/pen/Xbvbpo

CSS

$(document).ready(function() {

//variables//
workTime = 25;
time = workTime * 60;
breakLength = 5;

//update variables

$(".breakMinus").click(function() {
  if (breakLength > 0) {
    breakLength -= 1;
    $(".breakLength").text(breakLength);
  }
})
$(".breakPlus").click(function() {
  breakLength += 1;
  $(".breakLength").text(breakLength);
})
$(".workMinus").click(function() {
  if (workTime > 0) {
    workTime -= 1;
    $(".workTime").text(workTime);
    $("#time").text(workTime);
  }
})
$(".workPlus").click(function() {
  workTime += 1;
  $(".workTime").text(workTime);
  $("#time").text(workTime);
})

//click//
$(".start").click(function() {
  display = $('#time');
  startTimer(time, display);
})

//display//
$(".workTime").text(workTime);
$(".breakLength").text(breakLength);
$("#time").text(workTime);

console.log(workTime);
console.log(secondS);

//start time function//
function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

});

HTML

<h1>Adjust Work Time</h1>
<div class="workTime"></div>
<button class="btn btn-success workMinus">-</button>
<button class="btn btn-success workPlus">+</button>
<h1>Break Time</h1>
<div class="breakLength"></div>
<button class="btn btn-success breakMinus">-</button>
<button class="btn btn-success breakPlus">+</button>
<h1>Clock</h1>
<div><span id="time"></span>

</div>
<button class="btn btn-success start">start</button>

<div class=""></div>

Answer 1

代码中很少有缺陷；

1. 当您更改工作时间/休息时间时，“计时器”变量不会更新。因此，当调用 Start 计时器时，它使用原始值。因此出现了错误。

2. 使用 JSlint 检查您的代码是否有良好的 JavaScript 实践。

3. 如果设置了先前的间隔，则需要使用clearInterval()。