javascript - Javascript Pomodoro Timer - 暂停/播放/一般功能

Question

所以我在这里的计时器中似乎有一些真正的逻辑错误，我不太确定如何修复它们。我已经使代码有些工作，但我知道事实上存在一些逻辑错误，老实说，我断断续续地处理了几天，似乎无法解决它。根据我列出的代码，您几乎可以理解我对如何解决这个问题的想法。我知道这不是最佳实践，但我只是想努力解决这些问题！任何帮助是极大的赞赏。我真的需要最大的帮助来弄清楚如何使用给定的计时器功能配置暂停和播放功能。（请不要使用 jQuery 示例，只有原始 JS）

// Necessary Variables for the program
let timer = document.querySelector(".time");
let button = document.querySelector("#btn");
let subtractBreak = document.querySelector("#subtractBreak");
let addBreak = document.querySelector("#addBreak");
let subtractSession = document.querySelector("#subtractSesssion");
let addSession= document.querySelector("#addSession");
// Keeping up with the current count of the break and session
let currentCount = document.getElementsByClassName("counterNum");
// Keeps up with all the buttons on session and break +/-
let counterBtn = document.getElementsByClassName("counterBtn");
// Pause and play Variables
let pause = document.querySelector("#pause");
let play = document.querySelector("#play");
// keeps up with an offsetting count.
let count = 0;
let timerGoing = false;
let sessionTimeLeft = 1500;
let breakTimeLeft = 5;
let timeWhilePaused = sessionTimeLeft;
let paused = false;

function formatTimer(time){
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  return `${minutes.toLocaleString(undefined, {minimumIntegerDigits: 2})}:${seconds.toLocaleString(undefined, {minimumIntegerDigits: 2})}`;
}


// This function needs to be fixed - It allows the timer to go negative past 0.
function countdown(){
  timerGoing = true;
    count++;
    timer.innerHTML = formatTimer(sessionTimeLeft - count);
    // Used to remove the listener
    button.removeEventListener("click", interval);
    console.log("Timer is at: " + formatTimer(sessionTimeLeft - count) + "\nCount is at: " + count +  "\nsessionTimeLeft = " + sessionTimeLeft);
    // Checking if the time of the current session is up
    if(count == sessionTimeLeft){
      timerGoing = false;
      alert("We're here stop...");
      startBreak(breakTimeLeft);
    }
}

button.addEventListener("click", interval);
function interval(e){
  setInterval(countdown, 1000);
  console.log("running");
  e.preventDefault();
}
/*
I look through the event listener to be sure to check and see if any of them have been hit
not just the first one, which is what it would check for.
*/
for(let i = 0; i < counterBtn.length; i++){
  counterBtn[i].addEventListener("click", changeCount);
}

/*
  This functions whole job is to see which button was clicked using the 'event target'
  Once found it can determine if the id is subtract - then it will subtract the next element
  founds' amount, due to the structure of the HTML this will always be the number following;
  this process works vice versa for the addition, with the number being the element before.
*/
function changeCount(e){
  let clickedButtonsId = e.target.id;
  if(timerGoing == false){
    if(clickedButtonsId === "subtractBreak"){
      let currentValue = e.target.nextElementSibling.innerText;
      if(currentValue != 1){
      currentValue--;
      e.target.nextElementSibling.innerText = currentValue;
      breakTimeLeft -= 1;
    }
    } else if(clickedButtonsId === "subtractSession"){
        let currentValue = e.target.nextElementSibling.innerText;
          if(currentValue != 1){
        currentValue--;
        e.target.nextElementSibling.innerText = currentValue;
        sessionTimeLeft = currentValue * 60;
        // Allows the timer to update in real time
        timer.innerHTML = formatTimer(sessionTimeLeft);
      }
    }
    else if(clickedButtonsId === "addBreak"){
        let currentValue = e.target.previousElementSibling.innerText;
        currentValue++;
        e.target.previousElementSibling.innerText = currentValue;
        breakTimeLeft += 1;
      }
      else{
        let currentValue = e.target.previousElementSibling.innerText;
        currentValue++;
        e.target.previousElementSibling.innerText = currentValue;
        sessionTimeLeft = currentValue * 60;
        // Allows the timer to update in real time
        timer.innerHTML = formatTimer(sessionTimeLeft);
      }
  }
}

/* These functions below are not working */
pause.addEventListener("click", pauseTimer);
function pauseTimer(){
  timeWhilePaused = sessionTimeLeft;
  button.removeEventListener("click", interval);
  console.log("calling pause"+paused+"\n");
  paused = true;
  console.log("paused after: " + paused);
}

play.addEventListener("click", playTimer);
function playTimer(){
  console.log("Paused = " + paused);
  if(paused == true){
    console.log("calling play");
    console.log("Paused = " + paused);
    sessionTimeLeft = timeWhilePaused;
    setInterval(countdown, 1000);
  }
}

function startBreak(time){
  console.log("Calling this function");
  timer.innerHTML = formatTimer(breakTimeLeft - count);
}

标签： javascripttimerlogic