React Native中创建计时器/秒表的最简方法（用于视频播放视图计数）

setInterval 达不到预期的核心问题是它的回调执行依赖JS事件循环——如果主线程有耗时任务，回调会被延迟，累计下来计时偏差会越来越大。要实现精准的秒表，应该基于时间戳计算真实流逝时间，而非依赖定时器的间隔。

核心实现代码 #

下面是适配视频播放器的秒表逻辑，可直接嵌入视图计数：

// 秒表核心变量
let startTime = null;
let elapsedTime = 0;
let timerTick = null;
let isRunning = false;

// 开始计时（绑定视频播放事件）
function startWatch() {
  if (isRunning) return;
  isRunning = true;
  // 恢复上次暂停的进度
  startTime = Date.now() - elapsedTime;
  // 每100ms更新一次（可根据需求调整精度）
  timerTick = setInterval(updateWatch, 100);
}

// 更新计时&触发视图计数逻辑
function updateWatch() {
  if (!startTime) return;
  // 计算真实流逝的毫秒数
  elapsedTime = Date.now() - startTime;
  
  // --- 这里嵌入你的视图计数逻辑 ---
  const totalSeconds = Math.floor(elapsedTime / 1000);
  // 示例：每满30秒触发一次有效观看计数（可自定义规则）
  if (totalSeconds % 30 === 0 && totalSeconds > 0) {
    // 避免重复触发，可加个状态标记
    if (!window.lastCountSecond || window.lastCountSecond !== totalSeconds) {
      window.lastCountSecond = totalSeconds;
      // 执行计数累加：比如调用接口更新视图数
      console.log('触发有效观看计数');
    }
  }

  // （可选）格式化显示秒表时间
  const formattedTime = formatElapsedTime(elapsedTime);
  console.log('当前播放时长：', formattedTime);
}

// 格式化毫秒为时分秒
function formatElapsedTime(ms) {
  const hours = Math.floor(ms / 3600000);
  const minutes = Math.floor((ms % 3600000) / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 暂停计时（绑定视频暂停事件）
function pauseWatch() {
  isRunning = false;
  clearInterval(timerTick);
}

// 重置计时（绑定视频结束/切换事件）
function resetWatch() {
  isRunning = false;
  clearInterval(timerTick);
  startTime = null;
  elapsedTime = 0;
  window.lastCountSecond = null;
  console.log('秒表已重置');
}

适配视频播放器的使用方式 #

把秒表和视频的生命周期绑定：

• 视频开始播放时：调用 startWatch()
• 视频暂停时：调用 pauseWatch()
• 视频结束/切换视频时：调用 resetWatch()

方案优势 #

1. 用 Date.now() 计算真实时间差，完全不受JS事件循环阻塞影响，计时精度更高
2. 支持暂停/恢复，贴合视频播放的实际场景
3. 计数逻辑可灵活调整（比如改成累计播放满N分钟才计数，或者结合页面可见性判断）

内容的提问来源于stack exchange，提问作者ABHISHEK NAMBIAR