import { onUnmounted, ref } from 'vue';
import { TimeUnit, toMilliseconds } from '@tmp/utils';

export type Cleanup = () => any;
export type CallbackReturn = void | Cleanup;
export type Callback = (...args: any[]) => CallbackReturn | Promise<CallbackReturn>;

export const useIntervalAsync = (callback: Callback, delay: number, unit: TimeUnit = 'millisecond') => {
? const timeout = ref<number | null>(null);
? const canceled = ref<boolean>(false);
? const cleanup = ref<Cleanup | void>();

? // 將延遲時間轉(zhuǎn)換為毫秒
? delay = toMilliseconds(delay, unit);

? const run: TimerHandler = async () => {
? ? if (canceled.value) {
? ? ? return;
? ? }
? ? // 清理之前的回調(diào)函數(shù)
? ? if (typeof cleanup.value === 'function') {
? ? ? cleanup.value();
? ? }
? ? // 執(zhí)行回調(diào)函數(shù)并獲取清理函數(shù)
? ? cleanup.value = await Promise.resolve(callback());
? ? // 設(shè)置下一次任務(wù)輪詢的定時器
? ? timeout.value = globalThis.setTimeout(run, delay);
? };

? // 初始化任務(wù)輪詢
? run();

? // 刷新任務(wù)輪詢，取消當(dāng)前定時器，重新執(zhí)行回調(diào)函數(shù)
? const flush = () => {
? ? timeout.value && globalThis.clearTimeout(timeout.value);
? ? run();
? };

? // 取消任務(wù)輪詢，清理定時器和回調(diào)函數(shù)
? const cancel = () => {
? ? timeout.value && globalThis.clearTimeout(timeout.value);
? ? canceled.value = true;
? ? if (typeof cleanup.value === 'function') {
? ? ? cleanup.value();
? ? }
? };

? // 恢復(fù)任務(wù)輪詢，重新啟動定時器
? const recover = () => {
? ? canceled.value = false;
? ? flush();
? };

? // 在組件卸載時取消任務(wù)輪詢
? onUnmounted(() => {
? ? cancel();
? });

? return {
? ? flush,
? ? cancel,
? ? recover,
? };
};

export default useIntervalAsync;

<script lang="ts" setup>
import { useIntervalAsync } from '@/hooks/useIntervalAsync';
const { flush, cancel, recover } = useIntervalAsync(async () => {
? let timeout: any = null;
? await new Promise((resolve) => {
? ? timeout = setTimeout(() => {
? ? ? console.log('模擬異步事件');
? ? ? resolve('');
? ? }, 2000);
? });
? return () => {
? ? clearTimeout(timeout);
? };
}, 1000);
</script>
<template>
? <div>
? ? <button @click="flush">刷新</button>
? ? <button @click="cancel">取消</button>
? ? <button @click="recover">恢復(fù)</button>
? </div>
</template>