fix Clear timeout ตั้งค่าระบบ สำรองข้อมูล

src/modules/04_system/components/01_cardBackupRestore.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -32,6 +32,7 @@ const {
   fetchListBackup,
   backupRunningList,
   restoreRunningList,
+  stopAllPolling,
 } = useDataStore();
 const storeData = useDataStore();
 const {
@@ -160,6 +161,10 @@ onMounted(async () => {
   await restoreRunningList(() => {});
   dataMain.value = dataBackUp.value;
 });
+
+onUnmounted(() => {
+  stopAllPolling();
+});
 </script>
 
 <template>

src/modules/04_system/stores/main.ts

@@ -31,6 +31,9 @@ export const useDataStore = defineStore("systemStore", () => {
 
   const recordRestore = ref<Record<string, DataBackup>>({});
 
+  let backupTimeoutId: NodeJS.Timeout | null = null; // Timeout สำหรับการสำรองข้อมูล
+  let restoreTimeoutId: NodeJS.Timeout | null = null; // Timeout สำหรับการคืนค่า
+
   /**
    * ดึงข้อมูลรายการข้อมูลสำรอง
    */
@@ -131,6 +134,11 @@ export const useDataStore = defineStore("systemStore", () => {
    * @param cb
    */
   async function backupRunningList(cb: () => void) {
+    // Clear timeout
+    if (backupTimeoutId) {
+      clearTimeout(backupTimeoutId);
+      backupTimeoutId = null;
+    }
     await http
       .get<BackUpRunning[]>(config.API.backup + "/backup-running-list")
       .then(async (res) => {
@@ -142,10 +150,6 @@ export const useDataStore = defineStore("systemStore", () => {
           return;
         }
 
-        setTimeout(async () => {
-          backupRunningList(cb);
-        }, 3000);
-
         if (prevBackupRunTotal.value !== backupRunTotal.value) {
           res.data.forEach((item) => {
             const index = dataBackUp.value.findIndex((data) => {
@@ -166,6 +170,11 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevBackupRunTotal.value = backupRunTotal.value;
         }
+
+        // ตั้งเวลาเรียกใหม่
+        backupTimeoutId = setTimeout(() => {
+          backupRunningList(cb);
+        }, 3000);
       })
       .catch((err) => {
         messageError($q, err);
@@ -177,6 +186,12 @@ export const useDataStore = defineStore("systemStore", () => {
    * @param cb
    */
   async function restoreRunningList(cb: () => void) {
+    // Clear timeout
+    if (restoreTimeoutId) {
+      clearTimeout(restoreTimeoutId);
+      restoreTimeoutId = null;
+    }
+
     await http
       .get<BackUpRunning[]>(config.API.backup + "/restore-running-list")
       .then(async (res) => {
@@ -187,10 +202,6 @@ export const useDataStore = defineStore("systemStore", () => {
           return;
         }
 
-        setTimeout(async () => {
-          restoreRunningList(cb);
-        }, 3000);
-
         if (prevRestoreRunTotal.value !== restoreRunTotal.value) {
           for (const [key, value] of Object.entries(recordRestore.value)) {
             if (!res.data.find((v) => v.id === key))
@@ -200,6 +211,11 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevRestoreRunTotal.value = restoreRunTotal.value;
         }
+
+        // ตั้ง timeout
+        restoreTimeoutId = setTimeout(() => {
+          restoreRunningList(cb);
+        }, 3000);
       })
       .catch((err) => {
         messageError($q, err);
@@ -389,6 +405,28 @@ export const useDataStore = defineStore("systemStore", () => {
       });
   }
 
+  /** ฟังก์ชันหยุด polling สำหรับการสำรองข้อมูล */
+  function stopBackupPolling() {
+    if (backupTimeoutId) {
+      clearTimeout(backupTimeoutId);
+      backupTimeoutId = null;
+    }
+  }
+
+  /** ฟังก์ชันหยุด polling สำหรับการคืนค่า */
+  function stopRestorePolling() {
+    if (restoreTimeoutId) {
+      clearTimeout(restoreTimeoutId);
+      restoreTimeoutId = null;
+    }
+  }
+
+  /** ฟังก์ชันหยุดทั้งหมด */
+  function stopAllPolling() {
+    stopBackupPolling();
+    stopRestorePolling();
+  }
+
   return {
     dataBackUp,
 
@@ -407,6 +445,7 @@ export const useDataStore = defineStore("systemStore", () => {
 
     backupRunningList,
     restoreRunningList,
+    stopAllPolling,
 
     getSize,