本文详解如何在 vue 3 组合式 api 中构建一个支持手动启停、自动空闲暂停、交互恢复及精准重置的计时器，解决时间累积不准、暂停后无法续计等核心问题。
本文详解如何在 vue 3 组合式 api 中构建一个支持手动启停、自动空闲暂停、交互恢复及精准重置的计时器，解决时间累积不准、暂停后无法续计等核心问题。
在开发记忆匹配类游戏等交互型应用时，精确、可中断、可恢复的计时器是关键体验组件。原代码存在两个根本性缺陷：一是 updateChrono 每次调用都新建 setInterval，导致多个定时器并行运行；二是暂停逻辑未保存已耗时状态，重启时仍从初始时间戳计算，造成时间跳变或丢失。
✅ 正确实现：单例定时器 + 时间锚点校准
核心思路是只维护一个活跃的 setInterval 实例，并通过动态调整 startTime 锚点来实现“无缝续计”。需引入 ref 存储定时器 ID，并在暂停时清除它，在恢复时重建：
import { ref, onUnmounted } from 'vue'
const startTime = ref(0)
const elapsedTime = ref(0)
const isRunning = ref(null) // 存储 setInterval 返回的 ID
const isGameActive = ref(false)
// 启动计时器（首次或恢复时）
function startChrono() {
if (isRunning.value) return // 避免重复启动
isGameActive.value = true
// 若此前暂停过，需修正 startTime：当前时间 - 已耗时
startTime.value = Date.now() - elapsedTime.value * 1000
updateChrono()
}
// 暂停/恢复切换
function pauseChrono() {
if (isRunning.value) {
// 暂停：清除定时器
clearInterval(isRunning.value)
isRunning.value = null
} else if (isGameActive.value) {
// 恢复：重新设置 startTime 并启动
startTime.value = Date.now() - elapsedTime.value * 1000
updateChrono()
}
}
// 单一、受控的定时器更新逻辑
function updateChrono() {
isRunning.value = setInterval(() => {
elapsedTime.value = Math.floor((Date.now() - startTime.value) / 1000)
}, 1000)
}
// 重置：清空状态并停止定时器
function resetChrono() {
if (isRunning.value) {
clearInterval(isRunning.value)
isRunning.value = null
}
isGameActive.value = false
startTime.value = 0
elapsedTime.value = 0
}⚠️ 关键细节：startTime.value = Date.now() - elapsedTime.value * 1000 是续计正确的数学基础——它将“已过去的时间”反向映射为新的起始时间戳，确保下次计算 Date.now() - startTime.value 时结果连续无跳跃。
⏳ 添加自动空闲暂停（Idle Auto-Pause）
为满足“用户无操作 X 秒后自动暂停”需求，使用 setTimeout 构建防抖式空闲检测器：
立即学习“前端免费学习笔记（深入）”；
const idleTimer = ref(null)
const IDLE_TIMEOUT_MS = 10000 // 10秒空闲阈值
// 重置空闲计时器（应在每次用户交互时调用）
function resetIdle() {
if (idleTimer.value) clearTimeout(idleTimer.value)
idleTimer.value = setTimeout(() => {
if (isRunning.value && isGameActive.value) {
pauseChrono()
}
}, IDLE_TIMEOUT_MS)
}
// 在 startChrono 和用户交互事件（如卡片点击）中调用
function handleUserInteraction() {
resetIdle()
// ... 其他交互逻辑
}配合模板使用：
<template>
<main>
<h1>Time: <span>{{ formatTime(elapsedTime) }}</span></h1>
<button @click="startChrono(); resetIdle()">Start</button>
<button @click="pauseChrono()">Pause</button>
<button @click="resetChrono()">Reset</button>
<!-- 示例：游戏卡片点击时重置空闲计时 -->
<div v-for="card in cards" :key="card.id" @click="handleUserInteraction()">
{{ card.content }}
</div>
</main>
</template>? 辅助函数与清理保障
-
格式化函数（保持原逻辑，增强健壮性）：
function formatTime(seconds) { if (seconds < 0) return '0 s' const mins = Math.floor(seconds / 60) const secs = seconds % 60 return mins ? `${mins} min ${secs} s` : `${secs} s` } -
组件卸载清理（防止内存泄漏）：
onUnmounted(() => { if (isRunning.value) clearInterval(isRunning.value) if (idleTimer.value) clearTimeout(idleTimer.value) })
✅ 总结：设计要点
| 问题 | 解决方案 |
|---|---|
| 多定时器冲突 | 全局 isRunning ref 管理唯一实例 |
| 暂停后时间丢失 | 动态重设 startTime = now - elapsed * 1000 |
| 自动空闲暂停 | setTimeout + clearTimeout 防抖组合 |
| 资源泄漏风险 | onUnmounted 清理所有定时器 |
| 交互响应延迟 | resetIdle() 在所有用户触发点显式调用 |
该实现兼顾精确性、可维护性与用户体验，适用于任何需要高保真计时的 Vue 应用场景。
