How to make a Play and Pause Button for Stopwatch in JavaScript-CodePudding

I'm trying to implement play and pause function in my code. But after pausing once it's not starting again. I tried to store the update timer function in a object then calling it outside from the class so that I can pause it. How can I improve my implementation?

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const timerClass = {
  updatecountDown: setInterval(function() {
    const min = Math.floor(time / 60);
    let sec = time % 60;
    sec = sec < 10 ? "0"   sec : sec;
    countdown.innerHTML = `${min}:${sec}`;
    let ini = (time * 100) / initialTime;
    let percentage = ini * (1 / 100) * y.offsetWidth;
    x.style.width = percentage   "px";
    if (time == initialTime) clearInterval(updatecountDown);
    time  ;
  }, 1000),
};
timerClass.updatecountDown;

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown;
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div >
    <div >
      <span >
      </span>
    </div>
  </div>
  <button >Pause</button>
</body>

CodePudding user response：

For this to work you need to pull out the function passed into setInterval. By doing that you can call it directly when you need to restart it. The issue is that once you clear the interval, timerClass.updatecountDown is null and has no concept of the interval function.

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const intervalFn = function() {
  const min = Math.floor(time / 60);
  let sec = time % 60;
  sec = sec < 10 ? "0"   sec : sec;
  countdown.innerHTML = `${min}:${sec}`;
  let ini = (time * 100) / initialTime;
  let percentage = ini * (1 / 100) * y.offsetWidth;
  x.style.width = percentage   "px";
  if (time == initialTime) clearInterval(timerClass.updatecountDown);
  time  ;
};

const timerClass = {
  updatecountDown: setInterval(intervalFn, 1000),
};

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown = setInterval(intervalFn, 1000);
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div >
    <div >
      <span >
      </span>
    </div>
  </div>
  <button >Pause</button>
</body>

CodePudding user response：

I assume you want updatecountDown to be a function. Currently, it is a property that holds the timer id (returned by setInterval).

I would suggest creating two functions start and stop like so

const timerClass = {
  // holds the timer Id
  updatecountDown: null,
  // start/resume timer
  start: function() {
    this.updatecountDown = setInterval(function() {
      const min = Math.floor(time / 60);
      let sec = time % 60;
      sec = sec < 10 ? "0"   sec : sec;
      countdown.innerHTML = `${min}:${sec}`;
      let ini = (time * 100) / initialTime;
      let percentage = ini * (1 / 100) * y.offsetWidth;
      x.style.width = percentage   "px";
      if (time == initialTime) this.stop();
      time  ;
    }.bind(this), 1000);
  },
  // pause timer
  stop: function() {
    clearInterval(this.updatecountDown);
  }
};

// Starting timer
timerClass.start();
// timerClass.updatecountDown;

// changing from mouseup to click
playPause.addEventListener("click", function() {
  
  if (gate == false) {
    // clearInterval(timerClass.updatecountDown);
    timerClass.stop();
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    // timerClass.updatecountDown;
    timerClass.start();
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});