Managing Component State with OOP Classes

<script>
  class Stopwatch {
    constructor() {
      this.seconds = 0;
      this.timerId = null;
    }
 
    start(callback) {
      if (this.timerId) return;
      this.timerId = setInterval(() => {
        this.seconds += 1;
        callback(this.seconds);
      }, 1000);
    }
 
    stop() {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }
 
  const stopwatch = new Stopwatch();
  let elapsed = 0;
</script>
 
<p>Elapsed time: {elapsed}s</p>
<button on:click={() => stopwatch.start(val => elapsed = val)}>Start</button>
<button on:click={() => stopwatch.stop()}>Stop</button>