My Vue project includes a JavaScript class specifically for mobile devices. I'm looking to have this class emit a signal once the property 'hasEnded' is set to True for my object. How can I achieve this and chain together other events based on the completion of this class?
For example, when the user clicks 'Start' and the first timer counts to 100, I want the next one to begin. I aim for reusability and believe firing an event or signal would be ideal.
I don't possess extensive knowledge in mobile development, so if events aren't supported on mobile phones, what alternative should I consider?
class Counter {
constructor(name) {
this.hasEnded = false;
this.value = 0;
this.maxValue = 100;
this.intervalID = null;
this.elementName = ''
this.elementName = name;
}
start() {
this.intervalID = setInterval(this.increment.bind(this), 10);
}
increment() {
this.value++
var el = document.querySelector('.' + this.elementName);
el.innerHTML = this.value;
if (this.value == this.maxValue) {
this.hasEnded = true
clearInterval(this.intervalID);
}
}
}
window.addEventListener('load', function() {
let counterA = new Counter('counterA');
let counterB = new Counter('counterB');
/*
-- pseudo code --
when counterA.hasFinished == true {
counterB.start()
}
*/
var start = document.querySelector('.start');
start.addEventListener('click', function() {
counterA.start();
});
})<button class="start">Start</button>
<br>
<label>CounterA:</label>
<label class="counterA"></label>
<br>
<label>CounterB</label>
<label class="counterB"></label>