diff options
Diffstat (limited to 'packages/frontend/src/components/global/MkTime.vue')
| -rw-r--r-- | packages/frontend/src/components/global/MkTime.vue | 25 |
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> |