Swap setInterval for setTimeout

src/components/general/DateTimeSlider.vue

@@ -50,12 +50,7 @@
       <div class="play-controls">
         <v-menu offset="25" transition="fade-transition">
           <template v-slot:activator="{ props }">
-            <v-btn
-              v-bind="props"
-              density="compact"
-              variant="text"
-              icon
-            >
+            <v-btn v-bind="props" density="compact" variant="text" icon>
               <v-icon>mdi-play-speed</v-icon>
               <v-tooltip location="top" activator="parent">
                 <span>Playback speed</span>
@@ -136,7 +131,7 @@ const currentSpeed = ref(defaultSpeed)
 const availableSpeeds = [0.5, 1, 2, 4]
 
 const isPlaying = ref(false)
-let playIntervalTimer: ReturnType<typeof setInterval> | null = null
+let playTimeoutTimer: ReturnType<typeof setTimeout> | null = null
 
 const doFollowNow = ref(props.doFollowNow)
 let followNowIntervalTimer: ReturnType<typeof setInterval> | null = null
@@ -279,17 +274,14 @@ function togglePlay(): void {
 function startPlay(): void {
   isPlaying.value = true
   stopFollowNow()
-  playIntervalTimer = setInterval(
-    play,
-    props.playInterval * (1 / currentSpeed.value),
-  )
+  play()
 }
 
 function stopPlay(): void {
   isPlaying.value = false
-  if (playIntervalTimer) {
-    clearInterval(playIntervalTimer)
-    playIntervalTimer = null
+  if (playTimeoutTimer) {
+    clearTimeout(playTimeoutTimer)
+    playTimeoutTimer = null
   }
 }
 
@@ -298,6 +290,12 @@ function play(): void {
   if (dateIndex.value === maxIndex.value) {
     stopPlay()
   }
+  if (isPlaying.value) {
+    playTimeoutTimer = setTimeout(
+      play,
+      props.playInterval * (1 / currentSpeed.value),
+    )
+  }
 }
 
 function stepBackward(): void {
@@ -320,10 +318,6 @@ function increment(step: number): void {
 
 function setSpeed(speed: number) {
   currentSpeed.value = speed
-  if (isPlaying.value) {
-    stopPlay()
-    startPlay()
-  }
 }
 
 function formatSpeed(speed: number) {