javascript - 暂停/恢复javascript Pomodoro时钟

我一直在研究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>

最佳答案

主要的逻辑问题是在恢复功能内，该功能不会将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
  });

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

关于javascript - 暂停/恢复javascript Pomodoro时钟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43288536/