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 class="div1">
<div class="div">
<span class="dot">
</span>
</div>
</div>
<button class="playpause">Pause</button>
</body>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 class="div1">
<div class="div">
<span class="dot">
</span>
</div>
</div>
<button class="playpause">Pause</button>
</body>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;
}
});