Question

用户在指定休息时段和时间段（以分钟为单位）（整数）并呼叫timer后命中。

stopWatch调用的timer有效（尽管在.01秒后停止，稍后会计算出来）。

我希望用户能够指定一个休息时间，之后stopwatch一次又一次地恢复（即倒计时30分钟，休息5分钟，倒计时30分钟等等，直到手动复位或停止）。我想在setInterval函数中使用timer来永久地调用stopWatch - 如果存在breakTime - 会起作用，但我似乎错过了某些东西。不幸的是，它倒计时并停止死亡。我哪里错了？

function timer(minutes) {
    let breakTime = parseInt($("#breakLength").html());
    if (breakTime === 0) {
        stopWatch(minutes);
    } else {
        setInterval(stopWatch(minutes), breakTime*60000);
    }
}

function stopWatch (minutes) {
    let initialize = new Date();
    let deadLine = new Date(initialize.getTime() + minutes*60000);

    intervalHandle = setInterval(function() {
        let timeSet = Date.parse(deadLine) - Date.parse(new Date());
        if (timeSet > 0) {
            let total_seconds = (timeSet) / 1000;

            let hours = Math.floor(total_seconds / 3600);
            total_seconds = total_seconds % 3600;

            let minutes = Math.floor(total_seconds / 60);
            total_seconds = total_seconds % 60;

            let seconds = Math.floor(total_seconds);

            // display time as HH:MM:SS
            hours = pretty_time_string(hours);
            minutes = pretty_time_string(minutes);
            seconds = pretty_time_string(seconds);
            let currentTimeString = hours + ":" + minutes + ":" + seconds;
            timeRemaining = timeSet;
            console.log(currentTimeString);
            $("#displayHours").html(hours);
            $("#displayMins").html(minutes);
            $("#displaySecs").html(seconds);
        } else {
            stopTimer(intervalHandle);
        }
    }, 1000);
}

Answer 1

瑞安，我认为你再也不会因为忘记在计时器完成后启动计时器而再次执行计时器。我稍微重构了你的版本，所以你可以改变你的代码。希望默认情况下你会想要这种行为。

let tickHandler;
let breakHandler;

function kill() {
  clearInterval(tickHandler);
  clearTimeout(breakHandler);
}

function timer(minutes) {
  let breakTime = parseFloat(document.querySelector('#breakTime').value, 10) * 60000;

  startWatch(minutes, breakTime);
}

function display(deadLine) {
  let displayDate = new Date(deadLine);
  let hrs = displayDate.getUTCHours().toString();
  let min = displayDate.getUTCMinutes().toString();
  let sec = displayDate.getUTCSeconds().toString();

  document.querySelector("#watch").value = hrs.padStart(2, '0') + ' : ' + min.padStart(2, '0') + " : " + sec.padStart(2, '0');
}

function startWatch(minutes, breakTime) {
  breakHandler = setTimeout(function() {
    let initialize = new Date(0);
    let deadLine = new Date(minutes * 60000);
    let currDate = Date.now();

    display(deadLine);

    tickHandler = setInterval(function() {
      let timePass = Date.now() - currDate;
      deadLine = deadLine - timePass;

      if (deadLine > 0) {
        let displayDate = new Date(deadLine);

        display(displayDate);
        currDate = Date.now();
      } else {
        clearInterval(tickHandler);
        startWatch(minutes, breakTime);
      }
    }, 1000);
  }, breakTime);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <label>BreakTime</label>
  <input id="breakTime" value="0" />
  <br/>
  <button onclick="timer(1)">Start Timer</button>
  <button onclick="kill()">Stop Timer</button>
  <br/>
  <br/>
  <label>Left:</label><input id="watch" readonly="true" />
</body>

</html>

倒计时和指定中断后恢复计时器

1 个答案: