Vue.js 实现带自动暂停功能的计时器（Chronometer）教程-js教程-PHP中文网

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

本文详解如何在 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 返回的 ID

function 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() 自动执行，无需额外轮询。

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

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

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 ? `${mins} min ${secs}s` : `${secs} s`
}

模板中直接绑定：

<template><main><h1>Time: <span>{{ formatTime(elapsedTime) }}</span>
</h1>
    <button>Start</button>
    <button>{{ isRunning.value ? 'Pause' : 'Resume' }}</button>
    <button>Reset</button>
  </main></template>