opt: Optimize subtitle processing logic

src/libs/utils.js

@@ -71,28 +71,55 @@ export const debounce = (func, delay = 200) => {
 
 /**
  * 节流函数
- * @param {*} func
+ * @param {Function} func 要执行的函数
- * @param {*} delay
+ * @param {number} delay 延迟时间
- * @returns
+ * @param {object} options 选项 { leading: boolean, trailing: boolean }
+ * @returns {Function}
  */
-export const throttle = (func, delay = 200) => {
+export const throttle = (
-  let timer = null;
+  func,
-  let cache = null;
+  delay,
-  return (...args) => {
+  options = { leading: true, trailing: true }
-    if (!timer) {
+) => {
-      func(...args);
+  let timeoutId = null;
-      cache = null;
+  let lastArgs = null;
-      timer = setTimeout(() => {
+  let lastThis = null;
-        if (cache) {
+  let result;
-          func(...cache);
+  let previous = 0;
-          cache = null;
+
-        }
+  function later() {
-        clearTimeout(timer);
+    previous = options.leading === false ? 0 : Date.now();
-        timer = null;
+    timeoutId = null;
-      }, delay);
+    result = func.apply(lastThis, lastArgs);
-    } else {
+    if (!timeoutId) {
-      cache = args;
+      lastThis = lastArgs = null;
     }
+  }
+
+  return function (...args) {
+    const now = Date.now();
+    if (!previous && options.leading === false) {
+      previous = now;
+    }
+
+    const remaining = delay - (now - previous);
+    lastArgs = args;
+    lastThis = this;
+
+    if (remaining <= 0 || remaining > delay) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      previous = now;
+      result = func.apply(lastThis, lastArgs);
+      if (!timeoutId) {
+        lastThis = lastArgs = null;
+      }
+    } else if (!timeoutId && options.trailing !== false) {
+      timeoutId = setTimeout(later, remaining);
+    }
+    return result;
   };
 };
 

src/subtitle/BilingualSubtitleManager.js

@@ -1,5 +1,5 @@
 import { logger } from "../libs/log.js";
-import { truncateWords } from "../libs/utils.js";
+import { truncateWords, throttle } from "../libs/utils.js";
 import { apiTranslate } from "../apis/index.js";
 
 /**
@@ -12,9 +12,11 @@ export class BilingualSubtitleManager {
   #captionWindowEl = null;
   #paperEl = null;
   #currentSubtitleIndex = -1;
-  #preTranslateSeconds = 100;
+  #preTranslateSeconds = 120;
+  #throttleSeconds = 30;
   #setting = {};
   #isAdPlaying = false;
+  #throttledTriggerTranslations;
 
   /**
    * @param {object} options
@@ -29,6 +31,11 @@ export class BilingualSubtitleManager {
 
     this.onTimeUpdate = this.onTimeUpdate.bind(this);
     this.onSeek = this.onSeek.bind(this);
+
+    this.#throttledTriggerTranslations = throttle(
+      this.#triggerTranslations.bind(this),
+      this.#throttleSeconds * 1000
+    );
   }
 
   /**
@@ -225,7 +232,7 @@ export class BilingualSubtitleManager {
       this.#updateCaptionDisplay(subtitle);
     }
 
-    this.#triggerTranslations(currentTimeMs);
+    this.#throttledTriggerTranslations(currentTimeMs);
   }
 
   /**