CODEWITHSUNDEEP
javascripttimer
NZMAI
NZMAI

Reputation: 546

Implement countdowning of the second timer after first timer completed

I'm a beginner in programming at trying to create Pomodoro Clock project and want to trigger break countdown after session countdown completed. Like on the picture.

enter image description here

Timer is set through input field and according to the idea break timer should countdown set value, in reality it counts down session's value.

Javascript Code 

function sessionTimer(seconds) {
  clearInterval(countdown);
  const t = new Date();
  const end = t.getTime() + seconds * 1000;
  displayTimerLeftSession(seconds);
  console.log({
    t,
    end
  });

  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((end - t.getTime()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        breakTimer(seconds);
        return;
      }
      displayTimerLeftSession(remainSeconds);
      t.setSeconds(t.getSeconds() + 1);
    }
  }, 1000);
  t.setSeconds(t.getSeconds() + 1) - 1;
}

I know what is the issue. Because i call breakTimer in sessionTimer function, however i do not know how to make break timer countdown after session otherwise. My code is sloppy and it requires refactoring anyway. Please do not judge my harshly. If you want to see code please refer the Project

Upvotes: 0

Views: 342

Answers (2)

NZMAI
NZMAI

Reputation: 546

I have created breakSeconds global variable and update it in the function on submit

document.customFormBreak.addEventListener('submit', function(e) {
  e.preventDefault();
  breakSeconds = this.minutesBreak.value * 60;
  displayTimerLeftBreak(breakSeconds);
  this.reset();
});

Please proceed to the project if you want to see a code.

Upvotes: 0

Max Sindwani
Max Sindwani

Reputation: 1267

Hopefully I've interpreted your question correctly. One thing you can do is fire a callback once the timer completes. After n seconds have elapsed, you clear the interval and fire the callback which indicates that the timer has completed.

function timer(seconds, callback) {
  var countDown = function() {
    console.log(seconds);
    if (seconds-- == 0) {
      clearInterval(time);
      callback()
    }
  };
  
  countDown();
  var time = setInterval(countDown, 1000);
}

console.log('Starting session timer...');
timer(5, function() {
  console.log('Session timer complete. Starting break timer...');
  timer(5, function() {
    console.log('Break timer complete.');
  });
});

Upvotes: 1

Related Questions