fix timer requestAnimationFrame call may not stop after clear

Before this patch, the checker in the timer will stop only when
actions array is empty.
When we call play more than once, it will clear the timer first,
then  push filtered new actions and start the timer again. If
all of this happened in a frame, the checker which should be
cleared may found actions array is not empty and keep check.
So this patch we use timer.raf to hold raf's handle and cancel
it when clear was called.

src/replay/timer.ts

@@ -3,6 +3,7 @@ import { playerConfig, actionWithDelay } from '../types';
 export default class Timer {
   private actions: actionWithDelay[];
   private config: playerConfig;
+  private raf: number;
 
   constructor(config: playerConfig, actions: actionWithDelay[] = []) {
     this.actions = actions;
@@ -29,6 +30,7 @@ export default class Timer {
     let delayed = 0;
     const start = performance.now();
     const { actions, config } = this;
+    const self = this;
     function check(time: number) {
       delayed = time - start;
       while (actions.length) {
@@ -42,13 +44,16 @@ export default class Timer {
         }
       }
       if (actions.length > 0) {
-        requestAnimationFrame(check);
+        self.raf = requestAnimationFrame(check);
       }
     }
-    requestAnimationFrame(check);
+    this.raf = requestAnimationFrame(check);
   }
 
   public clear() {
+    if (this.raf) {
+      cancelAnimationFrame(this.raf);
+    }
     this.actions.length = 0;
   }