Fix issue with image timers being created recursively.

src/cached-value-controller.ts

@@ -28,11 +28,10 @@ export class CachedValueController<T> implements ReactiveController {
   }
 
   /**
-   * Update the cached value (and reset the timer).
+   * Update the cached value.
    */
   public updateValue(): void {
     this._value = this._callback();
-    this._startTimer();
   }
 
   /**
@@ -40,22 +39,24 @@ export class CachedValueController<T> implements ReactiveController {
    */
   public clearValue(): void {
     this._value = undefined;
-    this._stopTimer();
   }
 
   /**
    * Disable the timer.
    */
-  protected _stopTimer(): void {
-    clearInterval(this._timerID);
+  public stopTimer(): void {
+    if (this._timerID !== undefined) {
+      window.clearInterval(this._timerID);
+    }
     this._timerID = undefined;
   }
 
   /**
    * Enable the timer. Repeated calls will have no effect.
    */
-  protected _startTimer(): void {
-    this._stopTimer();
+  public startTimer(): void {
+    this.stopTimer();
+
     if (this._timerSeconds > 0) {
       this._timerID = window.setInterval(() => {
         this.updateValue();
@@ -69,6 +70,7 @@ export class CachedValueController<T> implements ReactiveController {
    */
   hostConnected(): void {
     this.updateValue();
+    this.startTimer();
     this._host.requestUpdate();
   }
 
@@ -77,5 +79,6 @@ export class CachedValueController<T> implements ReactiveController {
    */
   hostDisconnected(): void {
     this.clearValue();
+    this.stopTimer();
   }
 }