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的原因，并在另一次计算中减去！{/ p>

暂停/恢复javascript番茄钟

1 个答案: