Timer: simplify update interval

Author: danimoh

src/components/Timer.vue

@@ -139,7 +139,7 @@ class Timer extends Vue {
         : Timer.BASE_RADIUS);
     private fullCircleLength: number = 2 * Math.PI * this.radius.currentValue;
     private timeoutId: number | null = null;
-    private updateIntervalId: number | null = null;
+    private updateTimeoutId: number | null = null;
     private requestAnimationFrameId: number | null = null;
     private size: number = Timer.BASE_SIZE;
 
@@ -151,7 +151,7 @@ class Timer extends Vue {
 
     private destroyed() {
         clearTimeout(this.timeoutId);
-        clearInterval(this.updateIntervalId);
+        clearTimeout(this.updateTimeoutId);
         cancelAnimationFrame(this.requestAnimationFrameId);
         window.removeEventListener('resize', this._onResize);
     }
@@ -209,7 +209,8 @@ class Timer extends Vue {
         return { length, lengthWithLineCaps, gap, offset, strokeWidth };
     }
 
-    private get _updateInterval(): number {
+    private _calculateUpdateInterval(): number {
+        // Not a getter / computed prop to avoid unnecessary updates when not needed.
         const scaleFactor = this.size / Timer.BASE_SIZE;
         const circleLengthPixels = this.fullCircleLength * scaleFactor;
         const steps = circleLengthPixels * 3; // update every .33 pixel change for smooth transitions
@@ -226,7 +227,7 @@ class Timer extends Vue {
         this.radius.tweenTo(this.detailsShown || this.alwaysShowTime
             ? Timer.RADIUS_GROWTH_FACTOR * Timer.BASE_RADIUS
             : Timer.BASE_RADIUS, 300);
-        this._animateRadius();
+        this._rerender();
     }
 
     @Watch('startTime', { immediate: true })
@@ -238,39 +239,26 @@ class Timer extends Vue {
         if (this.startTime && this.endTime) {
             this.timeoutId = window.setTimeout(() => this.$emit(Timer.Events.END, this.endTime),
                 this.endTime - this.sampledTime);
-            this._setupUpdateInterval();
-        }
-    }
-
-    @Watch('_updateInterval')
-    private _setupUpdateInterval() {
-        if (this._timeLeft === 0 || this.requestAnimationFrameId !== null) return;
-
-        clearInterval(this.updateIntervalId);
-        this.updateIntervalId = window.setInterval(() => {
-            this._rerender();
-            if (this._timeLeft !== 0) return;
-            clearInterval(this.updateIntervalId);
-        }, this._updateInterval);
-    }
-
-    private _animateRadius() {
-        if (this.requestAnimationFrameId !== null || this.radius.finished) return;
-        clearInterval(this.updateIntervalId); // stop interval while we render via requestAnimationFrame
-        this.requestAnimationFrameId = requestAnimationFrame(() => {
             this._rerender();
-            this.requestAnimationFrameId = null;
-            if (this.radius.finished) {
-                this._setupUpdateInterval(); // start update interval again
-            } else {
-                this._animateRadius();
-            }
-        });
+        }
     }
 
     private _rerender() {
         this.sampledTime = Date.now() + this.timeOffset;
         this.fullCircleLength = 2 * Math.PI * this.radius.currentValue;
+
+        if (this._timeLeft === 0 && this.radius.finished) return;
+
+        clearTimeout(this.updateTimeoutId);
+        cancelAnimationFrame(this.requestAnimationFrameId);
+
+        if (!this.radius.finished) {
+            // animate radius with high frame rate
+            this.requestAnimationFrameId = requestAnimationFrame(() => this._rerender());
+        } else {
+            // update with low frame rate
+            this.updateTimeoutId = window.setTimeout(() => this._rerender(), this._calculateUpdateInterval());
+        }
     }
 
     private _onResize() {