CODEWITHSUNDEEP
javascripttimerclock
Daniel Semel
Daniel Semel

Reputation: 185

Pause/Resume javascript Pomodoro clock

I've been working on a Javascript pomodoro clock. I am able to set the session time and break time and it counts down without any trouble. But for some reason I can not get pause and resume to work. When the timer starts I capture the Date.now() and when I pause it I capture the current Date.now(). I find the difference and subtract from the duration, hoping to resume at the paused time, but it still keeps subtracting additional seconds. My code (from codepen) is below 

$(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>

Upvotes: 0

Views: 500

Answers (1)

traktor
traktor

Reputation: 19301

The major logic problem is within the resume function which does not reset start to a new notional value that is timePast milliseconds before the present. Using the original start value after a pause of undetermined duration simply does not work.

Date.parse(new Date()) also appeared to be causing problems. Without spending time on debugging it further, all occurrences of Date.parse(new Date()) were simply replaced with Date.now().

So a slightly cleaned up version of the resume function that appears to work: 

  $(".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
  });

but please test it further - you may wish to investigate why timePast is added in one calculation of duration and subtracted in the other!

Upvotes: 1

Related Questions