Vue3+vite 项目中使用 VueUse 的 useTimeoutFn 和 useIntervalFn

一、开篇：前端定时任务新思路

在Vue3的生态中，时间管理是个有趣的课题。传统开发中我们常常直接使用setTimeout和setInterval，但这些原生API在响应式场景下往往会遇到各种挑战：组件卸载时的内存泄漏、响应式变量的同步问题、复杂的控制逻辑等等。今天我为大家带来VueUse中的两个利器——useTimeoutFn和useIntervalFn，它们将彻底改变你的定时任务开发体验。

二、环境准备与技术栈说明

# 创建基础项目（技术栈：Vue3 + Vite）
npm create vite@latest vueuse-timer-demo -- --template vue-ts
cd vueuse-timer-demo
npm install @vueuse/core

本示例采用：

• 核心框架：Vue3 Composition API
• 构建工具：Vite 4.4
• 工具库：@vueuse/core 9.13

三、基础使用：函数式定时器实践

3.1 useTimeoutFn 延迟执行

<script setup lang="ts">
import { useTimeoutFn } from '@vueuse/core'

const message = ref('等待操作...')

// 创建3秒后执行的定时器（参数自动解包）
const { start } = useTimeoutFn(() => {
  message.value = '延迟操作已执行!'
}, 3000)

// 页面加载即启动
start()
</script>

<template>
  <div class="demo-box">{{ message }}</div>
</template>

3.2 useIntervalFn 周期任务

<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core'

const counter = ref(0)

// 创建每秒递增的计数器（立即启动）
const { pause } = useIntervalFn(() => {
  counter.value++
}, 1000)

// 5秒后自动停止
setTimeout(() => pause(), 5000)
</script>

<template>
  <div>当前计数：{{ counter }}</div>
</template>

四、高级实战：典型应用场景

4.1 表单提交防抖

// 技术栈：Vue3 + TypeScript
const searchInput = ref('')
const searchResults = ref<string[]>([])

// 500ms防抖定时器
const { start: startSearch } = useTimeoutFn(async () => {
  const res = await fetch(`/api/search?q=${searchInput.value}`)
  searchResults.value = await res.json()
}, 500)

watch(searchInput, () => {
  startSearch() // 输入变化时重启定时器
})

4.2 实时数据轮询

// 技术栈：Vue3 Composition API
const stockPrice = ref(0)
let retryCount = 0

const { pause } = useIntervalFn(async () => {
  try {
    const res = await fetch('/api/stock')
    stockPrice.value = res.data.price
    retryCount = 0 // 重置重试计数器
  } catch {
    if (++retryCount > 3) pause()
  }
}, 5000)

// 组件卸载时自动清理
onUnmounted(pause)

五、深度集成：响应式系统对接

5.1 动态间隔时间

const interval = ref(1000)
const speedLevel = ref(1)

// 响应式间隔设置
const { isActive } = useIntervalFn(() => {
  // 业务逻辑...
}, interval)

// 通过按钮改变执行频率
function accelerate() {
  speedLevel.value++
  interval.value = 1000 / speedLevel.value
}

5.2 复合定时策略

// 组合定时器实现倒计时重试策略
function countdownRetry(callback: () => void) {
  const count = ref(60)
  
  const { start: startCount } = useTimeoutFn(() => {
    useIntervalFn(() => {
      if (count.value-- <= 0) {
        callback()
        startCount() // 重启倒计时
        count.value = 60
      }
    }, 1000)
  }, 3000)

  return { count }
}

六、技术特性深度剖析

6.1 核心优势对比

6.2 原理揭秘

两个函数内部都实现了智能的Hook封装：

• 自动追踪组件生命周期
• 基于effectScope的副作用隔离
• 内部状态机的精确控制
• 响应式参数的深度处理

七、最佳实践与避坑指南

7.1 性能优化建议

1. 间隔精度：浏览器定时器存在4ms的最低限制
2. 不活跃标签页：使用document.visibilityState优化后台执行
3. 长周期任务：推荐使用Web Worker配合

7.2 常见问题应对

// 问题示例：多个定时器冲突
const { start: startTimer } = useTimeoutFn(/* ... */)

function handleClick() {
  startTimer() // 每次点击都会创建新定时器
}

// 修正方案：添加重置逻辑
function handleClick() {
  startTimer({ 
    cancelCallback: true // 覆盖现有定时器
  })
}

八、适用场景全景观察

8.1 推荐使用场景

• UI动画的时序控制
• 实时数据仪表盘更新
• 用户交互防抖/节流
• 重试机制实现
• 周期性数据同步

8.2 不推荐场景

• 高精度计时需求（考虑performance.now()）
• 需要同步状态的定时操作
• 依赖本地时间的计费系统

九、生态扩展：关联技术推荐

9.1 组合API推荐

// 与useStorage结合实现持久化配置
const config = useStorage('timer-config', {
  interval: 1000,
  enabled: true
})

// 与watchDebounced协同处理复杂响应
watchDebounced(
  source,
  newVal => {
    // 高频变化的处理逻辑
  },
  { debounce: 300 }
)

十、总结与展望

通过本文的深度探讨，我们全面了解了useTimeoutFn和useIntervalFn这两个VueUse核心函数。它们在简化定时任务管理、增强可维护性、提升开发效率等方面展现出显著优势。随着VueUse生态的持续发展，相信会出现更多优秀的响应式定时方案，期待读者在实践中探索出更多创新用法！