Firefox中setInterval计时严重偏差问题求助

看起来你遇到了跨浏览器定时器精度不一致的坑，我来帮你分析下问题所在以及怎么解决~

首先先明确你的场景：你做了一个文本滚动配合4分钟音频的效果，Chrome和Edge里控制台的计时和音频的mute点完全同步，但Firefox里控制台显示的时间明显偏快（比如显示8秒时实际音频才到10秒），但音频本身时长是对的。这大概率不是Firefox的bug，而是你依赖setInterval执行次数×固定间隔来计算时间的方式，本身就存在精度问题，不同浏览器的定时器调度策略差异放大了这个问题。

问题出在哪？ #

你当前的代码里，用pryc * tm3 / 1000来计算已过时间，这是默认每次setInterval都精确按照70ms执行，但实际上浏览器的定时器根本做不到绝对精确：

• 当浏览器主线程被其他任务（比如渲染、JS执行）阻塞时，setInterval的回调会被延迟执行，实际间隔会大于70ms；
• 不同浏览器的定时器调度机制不同，Firefox和Chrome在处理定时器的优先级、延迟补偿上有差异，导致Firefox里的实际执行间隔偏差更明显。

你看到的Firefox里显示8秒对应真实10秒的情况，就是因为setInterval的实际执行间隔比70ms长，所以pryc计数的次数比“理想情况”少，用计数×70ms算出来的时间就比真实时间短，但音频是按照真实时间走的，所以就出现了不同步。

怎么解决？ #

核心思路是：不要依赖定时器的执行次数来计算时间和滚动位置，改用真实的时间戳来做基准。

具体来说：

1. 记录滚动开始的时间戳；
2. 每次定时器回调时，用当前时间戳减去开始时间，得到真正的已过时间；
3. 根据真实的已过时间，计算文本应该滚动到的位置，而不是依赖pryc的计数。

修改你的代码示例如下：

var pri;
var tm3 = 70;
var pry = 650;
// 总滚动距离：从650到-2677，总共650 - (-2677) = 3327像素
var totalScrollDistance = 3327;
// 总滚动时长：假设是4分钟=240秒，你可以根据实际音频时长调整
var totalDuration = 240;
// 记录开始时间戳
var startTime = Date.now();

pri = setInterval(rosary.promise, tm3);

this.promise = function() {
  // 计算真实已过秒数
  var elapsedSeconds = (Date.now() - startTime) / 1000;
  console.log(elapsedSeconds); // 现在显示的是真实已过时间，和音频同步
  
  // 根据真实时间计算滚动位置：每秒滚动的距离 = 总距离 / 总时长
  var pixelsPerSecond = totalScrollDistance / totalDuration;
  pry = 650 - (elapsedSeconds * pixelsPerSecond);
  
  texts.promise(pry);
  
  // 当滚动到目标位置时停止
  if (pry < -2677) {
    clearInterval(pri);
  }
}

var Texts = function() {
  this.promise = function(yp) {
    yp = (yi + yp) * rtr;
    t[gdPro].style.top = yp + 'px';
    t[gdPro].style.visibility = 'visible';
  }
}
var texts = new Texts();

额外优化建议 #

如果你的音频是HTML5 Audio元素，还可以直接监听timeupdate事件，用音频的currentTime来做时间基准，这样同步精度会更高，完全和音频的时间线绑定，不受定时器的任何影响~

备注：内容来源于stack exchange，提问作者user3055937