import { defineComponent, watch, ref } from '@nuxtjs/composition-api'
export default defineComponent({
const selectedId = ref(0)
const timerIds: { [timerId in 'detail' | 'list']?: number } = {}
const setDetailData = ({
tgtId,
result,
}: {
tgtId: number
result: unknown
}) => {
// 受け取った後の処理。
console.log('setDetailData', tgtId, result)
}
const getDetailEveryInterval = async ({
tgtId,
interval = 10000,
callback,
}: {
tgtId: number
interval: number
callback?: ({ tgtId, result }: { tgtId: number; result: unknown }) => void
}) => {
const timerIdKey = 'detail'
const now = new Date()
// タイマー中のものがあれば解除しておく
clearDetailEveryInterval()
const result = await getData({tgtId}) // このgetDataは仮
callback && callback({ tgtId, result })
const leftTime = interval - (new Date().getTime() - now.getTime())
timerIds[timerIdKey] = window.setTimeout(() => {
getDetailEveryInterval({ tgtId, interval, callback })
}, leftTime < 0 ? 0 : leftTime )
}
const clearDetailEveryInterval = () => {
const timerIdKey = 'detail'
if (timerIds[timerIdKey] !== 0) {
clearTimeout(timerIds[timerIdKey])
}
timerIds[timerIdKey] = 0
}
watch(
() => selectedId.value,
(newVal) => {
if (newVal !== 0) {
getDetailEveryInterval({
tgtId: newVal,
interval: 5000,
callback: setDetailData,
})
} else {
clearDetailEveryInterval()
}
},
{ immediate: true }
)
})