From a3757fc8cf9dca945d547412d488cbe315062330 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] 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 | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/replay/timer.ts b/src/replay/timer.ts
index ec457e24..2255bb4d 100644
--- a/src/replay/timer.ts
+++ b/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;
   }