Пауза / Возобновление JavaScript Помодоро часы

Question

Я работал над часами Javascript Pomodoro. Я могу установить время сеанса и время перерыва, и он отсчитывает без проблем. Но почему-то не могу заставить себя остановиться и возобновить работу. Когда таймер запускается, я записываю 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
  });

но, пожалуйста, проверьте это дальше - вы можете выяснить, почему timePast добавляется в один расчет duration и вычитается в другом!