Issue
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>Solution
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;
}
});
Answered By - AngelSalazar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.