Merge pull request #49 from ssciwr/fix_42_set_interval

Use setTimeout instead of setInterval

frontend/src/components/JobsTable.vue

@@ -9,7 +9,7 @@ import {
 } from "flowbite-vue";
 import type { Job } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
-import { ref } from "vue";
+import { onUnmounted, ref } from "vue";
 
 const jobs = ref([] as Job[]);
 
@@ -29,6 +29,15 @@ function get_jobs() {
 
 get_jobs();
 
+let update_data_handle = setTimeout(function update_data() {
+  get_jobs();
+  update_data_handle = setTimeout(update_data, 30000);
+});
+
+onUnmounted(() => {
+  clearTimeout(update_data_handle);
+});
+
 function get_runtime_minutes(job: Job): number {
   if (job.status === "running") {
     return Math.ceil((Date.now() / 1000 - job.timestamp_start) / 60);

frontend/src/views/AdminView.vue

@@ -6,7 +6,7 @@ import ListComponent from "@/components/ListComponent.vue";
 import JobsTable from "@/components/JobsTable.vue";
 import ListItem from "@/components/ListItem.vue";
 import { FwbButton, FwbTab, FwbTabs } from "flowbite-vue";
-import { ref } from "vue";
+import { onUnmounted, ref } from "vue";
 import type { Sample } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
 
@@ -44,6 +44,15 @@ function get_samples() {
 }
 
 get_samples();
+
+let update_data_handle = setTimeout(function update_data() {
+  get_samples();
+  update_data_handle = setTimeout(update_data, 30000);
+});
+
+onUnmounted(() => {
+  clearTimeout(update_data_handle);
+});
 </script>
 
 <template>

frontend/src/views/SamplesView.vue

@@ -147,13 +147,14 @@ update_samples();
 
 const submit_message = ref("");
 
-let update_data = setInterval(() => {
+let update_data_handle = setTimeout(function update_data() {
   update_samples();
   update_submit_message();
-}, 30000);
+  update_data_handle = setTimeout(update_data, 20000);
+});
 
 onUnmounted(() => {
-  clearInterval(update_data);
+  clearTimeout(update_data_handle);
 });
 
 function update_submit_message() {