clear fetch pool when click cancel

src/background.js

@@ -2,6 +2,7 @@ import browser from "webextension-polyfill";
 import {
   MSG_FETCH,
   MSG_FETCH_LIMIT,
+  MSG_FETCH_CLEAR,
   DEFAULT_SETTING,
   DEFAULT_RULES,
   DEFAULT_SYNC,
@@ -62,6 +63,10 @@ browser.runtime.onMessage.addListener(
         fetchPool.update(interval, limit);
         sendResponse({ data: "ok" });
         break;
+      case MSG_FETCH_CLEAR:
+        fetchPool.clear();
+        sendResponse({ data: "ok" });
+        break;
       default:
         sendResponse({ error: `message action is unavailable: ${action}` });
     }

src/config/index.js

@@ -27,6 +27,7 @@ export const CACHE_NAME = `${APP_NAME}_cache`;
 
 export const MSG_FETCH = "fetch";
 export const MSG_FETCH_LIMIT = "fetch_limit";
+export const MSG_FETCH_CLEAR = "fetch_clear";
 export const MSG_TRANS_TOGGLE = "trans_toggle";
 export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";

src/libs/fetch.js

@@ -4,6 +4,7 @@ import { taskPool } from "./pool";
 import {
   MSG_FETCH,
   MSG_FETCH_LIMIT,
+  MSG_FETCH_CLEAR,
   CACHE_NAME,
   OPT_TRANS_MICROSOFT,
   OPT_TRANS_OPENAI,
@@ -188,3 +189,17 @@ export const fetchUpdate = async (interval, limit) => {
     fetchPool.update(interval, limit);
   }
 };
+
+/**
+ * 清空任务池
+ */
+export const fetchClear = async () => {
+  if (isExt) {
+    const res = await sendMsg(MSG_FETCH_CLEAR);
+    if (res.error) {
+      throw new Error(res.error);
+    }
+  } else {
+    fetchPool.clear();
+  }
+};

src/libs/pool.js

@@ -4,7 +4,7 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
   let maxCount = _limit; // 最大数量
   let curCount = 0; // 当前数量
   let interval = _interval; // 间隔时间
-  let timer;
+  let timer = null;
 
   /**
    * 任务池
@@ -28,8 +28,11 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
     }
   };
 
-  (async function run() {
+  const run = async () => {
     // console.log("timer", timer);
+    timer && clearTimeout(timer);
+    timer = setTimeout(run, interval);
+
     if (curCount < maxCount) {
       const item = pool.shift();
       if (item) {
@@ -42,13 +45,13 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
         }
       }
     }
-
-    timer && clearTimeout(timer);
-    timer = setTimeout(run, interval);
-  })();
+  };
 
   return {
     push: async (args) => {
+      if (!timer) {
+        run();
+      }
       return new Promise((resolve, reject) => {
         pool.push({ args, resolve, reject, retry: 0 });
       });
@@ -65,6 +68,7 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
       pool.length = 0;
       curCount = 0;
       timer && clearTimeout(timer);
+      timer = null;
     },
   };
 };

src/libs/translator.js

@@ -9,7 +9,7 @@ import {
 import { StoragesProvider } from "../hooks/Storage";
 import { queryEls } from ".";
 import Content from "../views/Content";
-import { fetchUpdate } from "./fetch";
+import { fetchUpdate, fetchClear } from "./fetch";
 
 /**
  * 翻译类
@@ -111,6 +111,9 @@ export class Translator {
 
     // 移除已插入元素
     queryEls(APP_LCNAME).forEach((el) => el.remove());
+
+    // 清空任务池
+    fetchClear();
   };
 
   _render = (el) => {
@@ -135,8 +138,10 @@ export class Translator {
     const span = document.createElement(APP_LCNAME);
     span.style.visibility = "visible";
     el.appendChild(span);
-    el.style.cssText += "-webkit-line-clamp: unset; max-height: none; height: auto;";
-    el.parentElement.style.cssText += "-webkit-line-clamp: unset; max-height: none; height: auto;";
+    el.style.cssText +=
+      "-webkit-line-clamp: unset; max-height: none; height: auto;";
+    el.parentElement.style.cssText +=
+      "-webkit-line-clamp: unset; max-height: none; height: auto;";
 
     const root = createRoot(span);
     root.render(