perf(frontend): use setInterval instead of setTimeout chain in MkTime (#10981)

* perf(frontend): use setInterval instead of setTimeout chain in MkTime

* fix

* props.origin

* props.origin 2

* fix

* add comment

* setIntervalを再設定する

* refactor

1 files changed, 16 insertions, 9 deletions

diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue
index dfc3c89798..9b02f989b4 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';
 
@@ -29,11 +29,12 @@ const invalid = Number.isNaN(_time);
 const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
 
 let now = $ref((props.origin ?? new Date()).getTime());
+const ago = $computed(() => (now - _time) / 1000/*ms*/);
+
 const relative = $computed<string>(() => {
 	if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
 	if (invalid) return i18n.ts._ago.invalid;
 
-	const ago = (now - _time) / 1000/*ms*/;
 	return (
 		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
 		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
@@ -47,19 +48,25 @@ const relative = $computed<string>(() => {
 });
 
 let tickId: number;
+let currentInterval: number;
 
 function tick() {
-	now = props.origin ?? (new Date()).getTime();
-	const ago = (now - _time) / 1000/*ms*/;
-	const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
+	now = (new Date()).getTime();
+	const nextInterval = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
 
-	tickId = window.setTimeout(tick, next);
+	if (currentInterval !== nextInterval) {
+		if (tickId) window.clearInterval(tickId);
+		currentInterval = nextInterval;
+		tickId = window.setInterval(tick, nextInterval);
+	}
 }
 
-if (props.mode === 'relative' || props.mode === 'detail') {
-	tick();
+if (!invalid && props.origin === null && (props.mode === 'relative' || props.mode === 'detail')) {
+	onMounted(() => {
+		tick();
+	});
 	onUnmounted(() => {
-		window.clearTimeout(tickId);
+		if (tickId) window.clearInterval(tickId);
 	});
 }
 </script>