diff --git a/src/App.vue b/src/App.vue index a6e8c1c..5a5db78 100644 --- a/src/App.vue +++ b/src/App.vue @@ -49,6 +49,22 @@ + + + @@ -102,7 +118,6 @@ import type { ServerData } from './types' const JSON_API = '/json/stats.json' const CARD_WIDTH = 350 -const REFRESH_INTERVAL = 500 const MIN_FETCH_INTERVAL = 500 const { width: WindowWidth } = useWindowSize() @@ -111,6 +126,7 @@ const settings = useLocalStorage('sstl-settings', { layout: 'grid', compactMode: false, showCpuChart: false, + cpuChartHistoryKeep: 300, }, { mergeDefaults: true, }) @@ -124,6 +140,7 @@ const error = ref(false) const fetching = ref(false) const showSettingPanel = ref(false) const latestUpdated = ref(0) +const timer = ref() const serverCardCount = computed(() => { return Math.floor(WindowWidth.value / CARD_WIDTH) || 1 @@ -138,9 +155,11 @@ onMounted(() => { .then(res => res.json()) .then((data) => { serverData.value = data - setInterval(() => { + timer.value = new Worker(new URL('./worker/timer.js', import.meta.url)) + timer.value.addEventListener('message', () => { fetchData() - }, REFRESH_INTERVAL) + }) + timer.value.postMessage('start') }) .catch(() => { error.value = true @@ -150,6 +169,11 @@ onMounted(() => { }) }) +onUnmounted(() => { + if (timer.value) + timer.value.postMessage('stop') +}) + function fetchData() { if (fetching.value) return diff --git a/src/worker/timer.js b/src/worker/timer.js new file mode 100644 index 0000000..6934e7a --- /dev/null +++ b/src/worker/timer.js @@ -0,0 +1,13 @@ +let timer = null + +onmessage = (e) => { + if (e.data === 'start') { + timer = setInterval(() => { + postMessage('tick') + }, 500) + } + if (e.data === 'stop') { + clearInterval(timer) + timer = null + } +}