I have implemented a stopwatch function that can run the stopwatch as shown below :
Stopwatch.vue
<script>
export default {
data() {
return {
time: "00:00.000",
timeBegan: null,
timeStopped: null,
stoppedDuration: 0,
started: null,
running: false,
};
},
methods: {
start() {
if (this.running) return;
if (this.timeBegan === null) {
this.timeBegan = new Date();
}
if (this.timeStopped !== null) {
this.stoppedDuration += new Date() - this.timeStopped;
}
this.started = setInterval(this.clockRunning, 10);
this.running = true;
},
clockRunning() {
let currentTime = new Date();
let timeElapsed = new Date(
currentTime - this.timeBegan - this.stoppedDuration
);
let min = timeElapsed.getUTCMinutes();
let sec = timeElapsed.getUTCSeconds();
let ms = timeElapsed.getUTCMilliseconds();
this.time =
this.zeroPrefix(min, 2) +
":" +
this.zeroPrefix(sec, 2) +
"." +
this.zeroPrefix(ms, 3);
},
zeroPrefix(num, digit) {
let zero = "";
for (let i = 0; i < digit; i++) {
zero += "0";
}
return (zero + num).slice(-digit);
},
},
mounted() {
this.start();
}
};
</script>
The above function enables the stopwatch to work properly, but I am looking to refactor it using Vuex so that I can easily access the stopwatch functionality from any component.
index.js - Within Vuex/store/stopwatch
export default {
state: {
time: "00:00.000",
timeBegan: null,
timeStopped: null,
stoppedDuration: 0,
started: null,
running: false,
},
actions: {
start(context) {
if (context.state.running) return;
if (context.state.timeBegan === null) {
context.state.timeBegan = new Date();
}
if (context.state.timeStopped !== null) {
context.state.stoppedDuration += new Date() - context.state.timeStopped;
}
context.state.started = setInterval(() => context.dispatch('clockRunning'), 10);
context.state.running = true;
},
clockRunning(context) {
let currentTime = new Date();
let timeElapsed = new Date(
currentTime - context.state.timeBegan - context.state.stoppedDuration
);
let min = timeElapsed.getUTCMinutes();
let sec = timeElapsed.getUTCSeconds();
let ms = timeElapsed.getUTCMilliseconds();
context.state.time =
context.dispatch('zeroPrefix')(min, 2) +
":" +
context.dispatch('zeroPrefix')(sec, 2) +
"." +
context.dispatch('zeroPrefix')(ms, 3);
},
zeroPrefix(num, digit) {
let zero = "";
for (let i = 0; i < digit; i++) {
zero += "0";
}
return (zero + num).slice(-digit);
}
},
mutations: {},
getters: {}
}
Upon running the code above, an error has been encountered :
https://i.sstatic.net/nFofo.png
The error seems to be related to this line of code :
context.state.started = setInterval(() => context.dispatch('clockRunning'), 10);
However, there doesn't appear to be any discernible error in the given line.
This is the same line of code that worked prior to transitioning to Vuex :
this.started = setInterval(this.clockRunning, 10);
How can this particular error be resolved?
Update :
A demo code has been created on codesandbox
An attempt was made to implement @Estus Flask's suggestion, yet the error persists. The change was made to the code as follows :
setInterval(() => context.dispatch('clockRunning'), 10)
However, this modification results in a rapidly growing error page, eventually reaching hundreds within a brief period. This error causes my PC to slow down and utilizes 100% CPU performance.
The error presents itself as depicted below :
https://i.sstatic.net/8mO0x.png
Any assistance in resolving this issue would be greatly appreciated.