Pause/Resume 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

主要的逻辑问题在于 resume 函数中，它不会将 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 的一个计算中被添加，而在另一个计算中被减去！

Pause/Resume javascript 番茄钟

Pause/Resume javascript Pomodoro clock

javascript

timer

clock