diff --git a/packages/frontend/src/composables/use-lowres-time.ts b/packages/frontend/src/composables/use-lowres-time.ts index f7e3794afe..3c5b561f51 100644 --- a/packages/frontend/src/composables/use-lowres-time.ts +++ b/packages/frontend/src/composables/use-lowres-time.ts @@ -7,6 +7,8 @@ import { ref, readonly, computed } from 'vue'; const time = ref(Date.now()); +export const TIME_UPDATE_INTERVAL = 10000; // 10秒 + /** * 精度が求められないが定期的に更新しないといけない時計で使用(10秒に一度更新)。 * tickを各コンポーネントで行うのではなく、ここで一括して行うことでパフォーマンスを改善する。 @@ -29,4 +31,4 @@ export function useLowresTime() { window.setInterval(() => { time.value = Date.now(); -}, 10000); +}, TIME_UPDATE_INTERVAL); diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue index 5ce06287a1..6bf182450e 100644 --- a/packages/frontend/src/widgets/WidgetCalendar.vue +++ b/packages/frontend/src/widgets/WidgetCalendar.vue @@ -43,7 +43,7 @@ import { useWidgetPropsManager } from './widget.js'; import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js'; import type { FormWithDefault, GetFormResultType } from '@/utility/form.js'; import { i18n } from '@/i18n.js'; -import { useLowresTime } from '@/composables/use-lowres-time.js'; +import { useLowresTime, TIME_UPDATE_INTERVAL } from '@/composables/use-lowres-time.js'; const name = 'calendar'; @@ -75,8 +75,13 @@ const monthP = ref(0); const dayP = ref(0); const isHoliday = ref(false); -watch(fNow, (to) => { - const now = new Date(to); +const nextDay = new Date(); +nextDay.setHours(24, 0, 0, 0); +let nextDayMidnightTime = nextDay.getTime(); +let nextDayTimer: number | null = null; + +function update(time: number) { + const now = new Date(time); const nd = now.getDate(); const nm = now.getMonth(); const ny = now.getFullYear(); @@ -106,8 +111,30 @@ watch(fNow, (to) => { yearP.value = yearNumer / yearDenom * 100; isHoliday.value = now.getDay() === 0 || now.getDay() === 6; +} + +watch(fNow, (to) => { + update(to); + + // 次回更新までに日付が変わる場合、日付が変わった直後に強制的に更新するタイマーをセットする + if (nextDayMidnightTime - to <= TIME_UPDATE_INTERVAL) { + if (nextDayTimer != null) { + clearTimeout(nextDayTimer); + nextDayTimer = null; + } + + nextDayTimer = window.setTimeout(() => { + update(nextDayMidnightTime); + nextDayTimer = null; + }, nextDayMidnightTime - to); + } }, { immediate: true }); +watch(day, () => { + nextDay.setHours(24, 0, 0, 0); + nextDayMidnightTime = nextDay.getTime(); +}); + defineExpose({ name, configure,