amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* fix

* props.origin

* props.origin 2

* fix

* add comment

* setIntervalを再設定する

* refactor
This commit is contained in:
tamaina 2023-07-04 22:48:39 +09:00 committed by GitHub
parent aa92df4e50
commit 526fa8bf3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/global/MkTime.vue
View File

@ -9,7 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import isChromatic from 'chromatic/isChromatic'; import isChromatic from 'chromatic/isChromatic';
import { onUnmounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { dateTimeFormat } from '@/scripts/intl-const'; 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; const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
let now = $ref((props.origin ?? new Date()).getTime()); let now = $ref((props.origin ?? new Date()).getTime());
const ago = $computed(() => (now - _time) / 1000/*ms*/);
const relative = $computed<string>(() => { const relative = $computed<string>(() => {
if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
if (invalid) return i18n.ts._ago.invalid; if (invalid) return i18n.ts._ago.invalid;
const ago = (now - _time) / 1000/*ms*/;
return ( return (
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) : ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).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 tickId: number;
let currentInterval: number;
function tick() { function tick() {
now = props.origin ?? (new Date()).getTime(); now = (new Date()).getTime();
const ago = (now - _time) / 1000/*ms*/; const nextInterval = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
const next = 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') { if (!invalid && props.origin === null && (props.mode === 'relative' || props.mode === 'detail')) {
onMounted(() => {
tick(); tick();
});
onUnmounted(() => { onUnmounted(() => {
window.clearTimeout(tickId); if (tickId) window.clearInterval(tickId);
}); });
} }
</script> </script>