src/composables/usePolling.ts
import {ref} from "vue"
export default function usePolling() {
let isPollingDisabled = ref<boolean>(false)
async function startPolling(
fn: () => void,
intervalTimeMsec: number = 3000 ,
waitingTimeMsec: number = 0 ,
) {
if (waitingTimeMsec > 0){
await new Promise(resolve => setTimeout(resolve, waitingTimeMsec))
}
// infinite loop
for (; ;) {
fn()
await new Promise(resolve => setTimeout(resolve, intervalTimeMsec))
if (isPollingDisabled.value) {
break;
}
}
}
function stopPolling() {
isPollingDisabled.value = true
}
return {
startPolling,
stopPolling
}
}
src/views/MyComponent.vue
<template>
<h2>{{ message }}</h2>
</template>
<script lang="ts" setup>
import {onBeforeMount, onBeforeUnmount, ref} from 'vue'
import usePolling from "@/composables/usePolling"
import dayjs from "dayjs"
const {startPolling, stopPolling} = usePolling()
const message = ref('start')
const getMessageAsync = async () => {
message.value = 'Ccc:' + dayjs().format('HH:mm:ss')
}
onBeforeMount(() => {
getMessageAsync()
startPolling(getMessageAsync, 1000)
})
onBeforeUnmount(() => {
stopPolling()
})
</script>