wot-design-uni/components/composables/useRaf.ts

一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

import { ref, onUnmounted } from 'vue'
import { isDef, isH5, isNumber } from '../common/util'

// 定义回调函数类型
type RafCallback = (time: number) => void

export function useRaf(callback: RafCallback) {
  const requestRef = ref<number | null | ReturnType<typeof setTimeout>>(null)

  // 启动动画帧
  const start = () => {
    const handle = (time: number) => {
      callback(time)
    }

    if (isH5) {
      requestRef.value = requestAnimationFrame(handle)
    } else {
      requestRef.value = setTimeout(() => handle(Date.now()), 1000 / 30)
    }
  }

  // 取消动画帧
  const cancel = () => {
    if (isH5 && isNumber(requestRef.value)) {
      cancelAnimationFrame(requestRef.value!)
    } else if (isDef(requestRef.value)) {
      clearTimeout(requestRef.value)
    }
  }

  onUnmounted(() => {
    cancel()
  })

  return { start, cancel }
}