useCountdown 面试话术

倒计时方案（START 法则版）

Situation (情境)： 在订单待支付场景中，用户需要在 15 分钟内完成支付。我们在移动端 H5/小程序中发现，当用户将应用切至后台（或锁屏）一段时间后再切回，或者用户手动修改手机系统时间，前端倒计时会出现严重偏差（如后台挂起 1 分钟，倒计时只走了 3 秒），导致前端显示“剩余 5 分钟”但实际订单已过期，引发用户支付失败投诉。

Task (任务)： 我的目标是实现一个高可靠、抗干扰的倒计时机制，确保无论用户如何切换前后台或篡改本地时间，前端展示的剩余时间始终与服务器保持毫秒级同步，并在过期瞬间精准触发状态更新。

Action (行动)：

1. 废弃本地递减逻辑：摒弃传统的 setInterval 配合 count-- 的做法，改用基于时间戳差值的实时计算方案。
2. 引入端云时间同步：在组件挂载及每隔 60 秒时，调用后端接口获取服务器时间戳，计算并缓存 serverTimeOffset（服务端与客户端的时间差）。
3. 实时修正算法：每次定时器触发时，利用公式 剩余时间 = 过期时间 - (Date.now() + serverTimeOffset) 重新计算，确保即使定时器在后台被暂停，一旦恢复执行，下一次 tick 就能立即算出正确的剩余时长。

Result (结果)： 该方案彻底解决了因应用挂起和本地时钟不准导致的倒计时漂移问题。上线后，订单过期状态的判断准确率达到 100%，有效消除了“明明显示还有时间却无法支付”的客诉，保障了订单流转的精准性。

五、可能的追问及回答

Q1：如果用户断网了，倒计时还准吗？

"这是个好问题。断网时确实无法同步服务器时间，我的处理是：

1. 首次加载页面时必须成功同步一次，否则提示用户网络异常
2. 断网期间继续基于本地时间 + 上次偏差值计算，虽然可能产生漂移，但误差可控
3. 网络恢复后立即重新同步，修正偏差

如果业务要求极高，可以进一步做断网倒计时暂停的交互提示。"

---

Q2：多个组件同时使用这个 Hook，会不会发起多次时间同步请求？

"目前的实现是每个实例独立同步。如果页面有多个倒计时，确实会重复请求。

优化方案可以封装一个全局的 TimeSyncService，用单例模式管理：

• 第一个组件挂载时启动同步
• 后续组件共用已计算好的时间偏差
• 所有组件卸载后才停止同步

这样既能减少请求，又能保证多个倒计时的一致性。"

---

Q3：1分钟同步一次，会不会对服务器造成压力？

"这个频率可以根据业务场景调整。我的考虑是：

• 订单倒计时通常是 15-30 分钟，1分钟同步一次的精度足够
• 如果服务器压力大，可以采用指数退避策略：前5分钟每分钟同步，之后每5分钟同步一次
• 或者接入 WebSocket 推送服务器时间变更，变被动拉取为主动推送"

---

Q4：网络请求本身有延迟，怎么保证同步的准确性？

"我目前的实现没有处理网络延迟，可以进一步优化：

• 记录请求发出时间和响应返回时间，计算往返耗时 RTT
• 假设网络延迟对称，服务器时间 = 返回时间 - RTT/2
• 多次采样取平均值，过滤异常值

不过实际业务中，1秒内的误差用户感知不明显，所以当前方案已经满足需求。"

---

六、收尾（可选）

"这个 Hook 上线后，用户关于倒计时不准的投诉归零了。后来我还把它沉淀成了团队内部的公共组件，在多个业务线复用。"

---

附：代码实现

import dayjs from 'dayjs'
import { ref } from 'vue'

export function useCountdown(expiryTime, onFinish) {
  const timer = ref(null) // 倒计时的定时器
  const syncInterval = ref(null) // 同步服务器时间的定时器
  const countDown = ref(0) // 倒计时剩余时间（毫秒）
  const refreshRate = 60000 // 时间同步间隔（1分钟）
  let serverTimeOffset = 0 // 服务器与本地的时间偏差
  let isSyncing = false // 防止重复同步

  // 同步服务器时间，避免本地与服务器时间不一致
  const syncTimeWithServer = async (getTimeAPI) => {
    if (isSyncing) return
    isSyncing = true
    try {
      const res = await getTimeAPI()
      if (res.code === 200) {
        // 确保时间戳是Number类型
        const serverTime = dayjs(Number(res.data.timestamp))
        const localTime = dayjs()
        serverTimeOffset = serverTime.diff(localTime)
      } else {
        console.error('时间同步失败:', res.message)
      }
    } catch (error) {
      console.error('时间同步出错:', error)
    } finally {
      isSyncing = false
    }
  }

  // 计算剩余时间（考虑服务器时间偏差）
  const getExpiryTime = () => {
    const now = dayjs().add(serverTimeOffset, 'ms')
    const expiration = dayjs(expiryTime)
    return Math.max(expiration.diff(now), 0)
  }

  // 更新倒计时
  const updateCountDown = () => {
    countDown.value = getExpiryTime()
    if (countDown.value === 0) {
      stopCountDown()
      if (onFinish) onFinish() // 通知倒计时结束
    }
  }

  // 启动倒计时
  const startCountDown = () => {
    if (timer.value) return
    updateCountDown()
    timer.value = setInterval(updateCountDown, 1000) // 每秒更新
  }

  // 停止倒计时
  const stopCountDown = () => {
    if (timer.value) clearInterval(timer.value)
    timer.value = null
  }

  // 启动服务器时间同步
  const startSyncTime = async (getTimeAPI) => {
    await syncTimeWithServer(getTimeAPI)
    syncInterval.value = setInterval(() => syncTimeWithServer(getTimeAPI), refreshRate)
  }

  // 停止时间同步
  const stopSyncTime = () => {
    if (syncInterval.value) clearInterval(syncInterval.value)
    syncInterval.value = null
  }

  // 清理资源
  const cleanup = () => {
    stopCountDown()
    stopSyncTime()
  }

  return {
    countDown,
    startCountDown,
    stopCountDown,
    startSyncTime,
    stopSyncTime,
    cleanup,
  }
}