Vue.js 编写带自动暂停功能的计时器（Chronometer）教程

作者：袖梨 2026-06-30

本文详解如何在 vue 3 组合式 api 中构建一个支持手动启停、空闲自动暂停、交互后恢复计时、以及精准重置的高性能计时器，解决常见时间累积偏差与状态同步问题。

本文详解如何在 vue 3 组合式 api 中构建一个支持手动启停、空闲自动暂停、交互后恢复计时、以及精准重置的高性能计时器，解决常见时间累积偏差与状态同步问题。

在开发记忆匹配类游戏等交互型应用时，精确、响应及时且语义清晰的计时器至关重要。用户期望看到真实反映“有效操作时间”的倒计时——即仅在活跃交互期间计时，空闲超时自动暂停，再次操作立即续计，且重置后彻底清零。原始实现中存在两大核心缺陷：暂停/恢复逻辑未保存中间状态导致时间跳变，以及缺乏空闲检测机制。本文将系统性重构该 Chronometer，确保时间计算精准、状态管理可靠、代码可维护性强。

✅ 正确的暂停/恢复机制：基于 intervalId 与动态 startTime

关键在于：暂停不是停止时间流逝，而是暂停更新；恢复时需修正 startTime，使其等于“当前时间减去已耗时”，从而保证后续差值计算连续无断层。

import { ref, onUnmounted } from 'vue'const startTime = ref(0)const elapsedTime = ref(0)const isRunning = ref(null) // 存储 setInterval 返回的 IDfunction updateChrono() {  isRunning.value = setInterval(() => {    const now = Date.now()    elapsedTime.value = Math.floor((now - startTime.value) / 1000)  }, 1000)}function startChrono() {  // 重置为新会话：记录此刻为起点  startTime.value = Date.now()  elapsedTime.value = 0  updateChrono()}function pauseChrono() {  if (isRunning.value) {    // 暂停：清除定时器    clearInterval(isRunning.value)    isRunning.value = null  } else if (elapsedTime.value > 0) {    // 恢复：修正 startTime，使后续计算延续之前进度    startTime.value = Date.now() - elapsedTime.value * 1000    updateChrono()  }}// 组件卸载时务必清理定时器，防止内存泄漏onUnmounted(() => {  if (isRunning.value) {    clearInterval(isRunning.value)  }})

⚠️ 注意：setInterval 返回值必须被持久引用（如 ref），否则无法在 pauseChrono 中准确清除；直接在 updateChrono 内部声明 intervalId 变量会导致作用域丢失。

⏱️ 实现空闲自动暂停：防抖式 resetIdle() 机制

所谓“空闲”，本质是用户长时间无交互事件（如点击、键盘输入）。我们不监听全局事件，而是在每次用户主动操作（如点击卡片、触发 startChrono）时重置空闲倒计时：

立即学习“前端免费学习笔记（深入）”；

const idleTimer = ref(null)const IDLE_TIMEOUT_MS = 10_000 // 10 秒后自动暂停function resetIdle() {  if (idleTimer.value) {    clearTimeout(idleTimer.value)  }  idleTimer.value = setTimeout(() => {    if (isRunning.value) { // 仅当计时器正在运行时才暂停      pauseChrono()    }  }, IDLE_TIMEOUT_MS)}// 在所有用户交互入口调用它，例如：function handleCardClick() {  resetIdle()  // ... 其他逻辑}function startChrono() {  resetIdle() // 启动时也重置空闲计时  startTime.value = Date.now()  elapsedTime.value = 0  updateChrono()}

此设计简洁高效：只要用户持续操作，setTimeout 就不断被清除并重启；一旦停止操作超过 IDLE_TIMEOUT_MS，pauseChrono() 自动执行，无需额外轮询。

? 完整重置：彻底清理所有状态

resetChrono 不应仅重置数值，还需终止定时器、清除空闲定时器，并确保 DOM 显示即时更新：

function resetChrono() {  // 清除所有定时器  if (isRunning.value) {    clearInterval(isRunning.value)    isRunning.value = null  }  if (idleTimer.value) {    clearTimeout(idleTimer.value)    idleTimer.value = null  }  // 重置状态  startTime.value = 0  elapsedTime.value = 0  // 注意：无需显式设置 isRunning 或 idleTimer 为 false/null —— 已在上面处理}

? 时间格式化与模板渲染

保持原有 formatTime 函数，但建议增强健壮性（如支持 0 秒显示）：

function formatTime(seconds) {  if (seconds < 0) return '0 s'  const mins = Math.floor(seconds / 60)  const secs = seconds % 60  return mins > 0 ? `${mins} min ${secs}s` : `${secs} s`}

模板中直接绑定：

<template>  <main>    <h1>Time: <span>{{ formatTime(elapsedTime) }}</span></h1>    <button @click="startChrono">Start</button>    <button @click="pauseChrono">{{ isRunning.value ? 'Pause' : 'Resume' }}</button>    <button @click="resetChrono">Reset</button>  </main></template>