Earthworm 项目：实现答题通关时长统计与分享功能的技术方案

背景与需求

在在线学习平台 Earthworm 中，为了增强用户的学习动力和成就感，开发团队计划实现一个答题通关时长统计功能。该功能将记录用户完成课程练习所用的时间，并在分享时展示这个时间数据，让用户能够炫耀自己的成绩，同时激发良性竞争。

核心功能设计

基本实现原理

1. 时间记录机制：

   • 在用户开始答题时记录开始时间戳
   • 在答题完成时获取当前时间戳
   • 计算两者差值得到总用时

2. 数据展示：

   • 在答题结束面板显示总用时
   • 在分享图片中嵌入用时信息

技术挑战与解决方案

在实际实现过程中，需要考虑多种异常情况对计时准确性的影响：

1. 浏览器意外关闭

解决方案：

• 使用 onbeforeunload 事件监听器
• 在浏览器关闭前将当前时间戳保存到本地存储或发送到服务器
• 下次用户继续时从保存点恢复计时

2. 用户主动离开页面

处理方案：

• 在组件卸载生命周期(onUnmounted)中记录结束时间
• 将数据持久化到课程历史记录表中
• 提供"继续上次进度"的功能选项

3. 长时间无操作

优化方案：

• 设置活动检测机制(如30秒无输入)
• 在无操作期间暂停计时
• 恢复操作后继续计时
• 或者在界面上显示"计时已暂停"提示

高级实现细节

计时器设计

推荐采用分段计时策略而非简单的结束时间减开始时间：

1. 记录多个时间片段
2. 每次暂停/恢复时记录时间点
3. 累计有效活动时间

let segments = [
  {start: 开始时间, end: 暂停时间1},
  {start: 恢复时间1, end: 暂停时间2},
  // ...
]

数据持久化

1. 本地存储：

   • 使用 localStorage 保存当前计时状态
   • 定期(如每10秒)自动保存进度

2. 服务器同步：

   • 将关键时间点同步到后端
   • 使用课程历史记录表存储完整时间数据

用户界面优化

1. 实时显示当前用时
2. 无操作时显示暂停状态
3. 提供"暂停/继续"手动控制选项
4. 异常恢复时的提示信息

技术实现建议

1. 前端实现：

   • 使用 Vue 的 Composition API 管理计时状态
   • 封装自定义 hook 处理复杂的计时逻辑
   • 添加防抖/节流优化性能

2. 后端配合：

   • 设计专门的数据结构存储时间记录
   • 提供时间数据验证接口
   • 实现异常情况下的数据恢复机制

3. 分享功能：

   • 使用 Canvas 动态生成包含用时信息的分享图
   • 考虑不同社交平台的图片尺寸要求
   • 添加平台品牌元素增强传播效果

总结

Earthworm 的答题计时功能不仅是一个简单的技术实现，更是一种提升用户参与度和学习动力的有效手段。通过精心设计的异常处理机制和用户友好的界面展示，可以确保数据的准确性同时提供良好的用户体验。这种功能的实现需要考虑前端状态管理、数据持久化、异常恢复等多个技术层面，是综合性的前端开发实践案例。