From 2f5efdd16999508766a7c5ae791360ccacc8257a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 9 Jun 2023 03:51:28 +0000
Subject: [PATCH] perf(frontend): use setInterval instead of setTimeout chain
 in MkTime

---
 .../frontend/src/components/global/MkTime.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue
index dfc3c89798..76e4ddb4e6 100644
--- a/packages/frontend/src/components/global/MkTime.vue
+++ b/packages/frontend/src/components/global/MkTime.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import isChromatic from 'chromatic/isChromatic';
-import { onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { i18n } from '@/i18n';
 import { dateTimeFormat } from '@/scripts/intl-const';
 
@@ -49,17 +49,22 @@ const relative = $computed<string>(() => {
 let tickId: number;
 
 function tick() {
-	now = props.origin ?? (new Date()).getTime();
-	const ago = (now - _time) / 1000/*ms*/;
+	const _now = (new Date()).getTime();
+	const ago = (_now - _time) / 1000/*ms*/;
 	const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
 
-	tickId = window.setTimeout(tick, next);
+	if (_now - now > next) {
+		now = _now;
+	}
 }
 
-if (props.mode === 'relative' || props.mode === 'detail') {
-	tick();
+if (!invalid && (props.mode === 'relative' || props.mode === 'detail' || props.origin === null)) {
+	onMounted(() => {
+		tick();
+		tickId = window.setInterval(tick, 10000);
+	});
 	onUnmounted(() => {
-		window.clearTimeout(tickId);
+		if (tickId) window.clearInterval(tickId);
 	});
 }
 </script>