暂停/恢复 javascript 番茄钟

Question

我一直在研究 Javascript 番茄钟。我可以设置会话时间和休息时间，它倒计时没有任何麻烦。但由于某种原因，我无法暂停并恢复工作。当计时器启动时，我捕获 Date.now()，当我暂停它时，我捕获当前的 Date.now()。我找到了差异并从持续时间中减去，希望在暂停的时间恢复，但它仍然会继续减去额外的秒数。我的代码（来自codepen）在下面

$(document).ready(function() {
  var total;
  var i;
  var x;
  var y;
  var display;
  var minutes;
  var seconds;
  var duration;
  var sessionInterval;
  var freeze;
  var timePast;
  var t;
  var start;
  var clock;

  function timer(end) {
    total = Date.parse(end) - Date.parse(new Date());
    minutes = Math.floor((total / 1000 / 60) % 60);
    seconds = Math.floor((total / 1000) % 60);
    return {
      'total': total,
      'minutes': minutes,
      'seconds': seconds
    };
  }

  function beginTimer() {
    start = Date.now();
    clearInterval(sessionInterval);
    clock = document.getElementById('display2');
    start = Date.now();
    sessionInterval = setInterval(function() {
      t = timer(duration);
      clock.innerHTML = 'minutes:' + t.minutes + '<br>' + 'seconds:' + t.seconds + '<br>';

      if (t.total <= 0) {
        clearInterval(sessionInterval);

        if (i === 0) {
          session();

        } else if (i === 1) {
          breakTime();
        }
      }
    }, 1000);
  }

  function session() {
    duration = new Date(Date.parse(new Date()) + (x * 60 * 1000));
    beginTimer();
    i = 1;
  }

  function breakTime() {
    duration = new Date(Date.parse(new Date()) + (y * 60 * 1000));
    beginTimer();
    i = 0;
  }

  $(".sendInput").click(function() {

    if (x == null) {
      x = 25;

    } else {
      x = parseInt(document.getElementById("workTime").value, 10);
    }

    if (y == null) {
      y = 5;

    } else {
      y = parseInt(document.getElementById("breakMin").value, 10);
    }
    session();
  });

  $(".sendPause").click(function() {
    freeze = Date.now();
    timePast = freeze - start;
    clearInterval(sessionInterval);
  });

  $(".sendResume").click(function() {
    if (i === 1) {
      duration = new Date(((Date.parse(new Date())) + (x * 60 * 1000)) - timePast);
    }

    if (i === 0) {
      duration = new Date(((Date.parse(new Date())) + (y * 60 * 1000)) + timePast);
    }

    beginTimer();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="break: 5 minutes" id="breakMin">
  
<input type ="text" placeholder="session: 25 minutes" id="workTime">
  
<input type="button" value="Start" class="sendInput">
  
 <input type="button" value="Pause" class="sendPause">
  
<input type="button" value="Resume" class="sendResume">
  
<div id="display2">
</div>

Answer 1

主要的逻辑问题是在恢复函数中，它不会将start 重置为新的名义值，即现在之前的timePast 毫秒。在未确定持续时间的暂停后使用原始 start 值根本不起作用。

Date.parse(new Date()) 似乎也引起了问题。无需花时间进一步调试它，Date.parse(new Date()) 的所有 次出现都被简单地替换为 Date.now()。

因此，恢复功能的略微清理版本似乎可以工作：

  $(".sendResume").click(function() {
    var now = Date.now();
    if (i === 1) {
      duration = new Date( now + x * 60 * 1000 - timePast);
    }

    if (i === 0) {
      duration = new Date( now + y * 60 * 1000 + timePast);
    }

    beginTimer();
    start = now - timePast;  // <-- reset notional start time
  });

但请进一步测试 - 您可能希望调查为什么在 duration 的一个计算中添加了 timePast 而在另一个计算中减去了！