创建一个精确的毫秒计时器，在 Javascript 中循环

Question

经过一些研究，我了解到在 Javascript 中创建计时器的最准确方法是使用 date.now() -as this answer 比较从起点开始的经过时间建议。

var startTime = Date.now();

var interval = setInterval(function() {
  var elapsedTime = Date.now() - startTime;
  var time = (elapsedTime / 1000).toFixed(3);
  console.log(time);
}, 10);

这提供了我正在寻找的准确性，但我希望让这个计时器在某个值后自行重置（假设 var total = 12000）。该值由视频播放列表的长度决定（我正在为视频节目构建 'live' 播放头）并且是一个变量。

我不知道该怎么做，因为计数器正在计算从某个时间点开始的经过时间，它不太符合我正在寻找的逻辑。任何建议，将不胜感激。

Answer 1

您可以在所需时间过后使用 .setTimeout() at the end of your code to restart your .setInterval()

function runInterval (loopAfter) {
  var startTime = Date.now();

  var interval = setInterval(function() {
    var elapsedTime = Date.now() - startTime;
    var time = (elapsedTime / 1000).toFixed(3);
    console.log(time);
  }, 10);
  
  setTimeout(() => {
    clearInterval(interval);
    runInterval(loopAfter);
  }, loopAfter);
}

runInterval(5000);

Answer 2

试试这个：

var startTime = Date.now();
let total = 0;
var interval = setInterval(function() {
  if (total === 12000) {
    total = 0;
    startTime = Date.now();
  } else {
    total++;
    var elapsedTime = Date.now() - startTime;
    var time = (elapsedTime / 1000).toFixed(3);
  }
  console.log(time);
}, 10);

创建一个精确的毫秒计时器，在 Javascript 中循环

Create an accurate millisecond timer that loops in Javascript

javascript

setinterval

node.js