javascript - 间隔函数更新秒数如何影响分钟数？

Question

如果使用整数计数器，mod 60 应该更容易，但是 Date() 对象存在一些问题。

<p id="demo"></p>

<script>
var d = new Date();
var timeCounter = 50;
d.setMinutes(0);
d.setSeconds(timeCounter);
setInterval(function(){
    d.setSeconds(timeCounter);
    document.getElementById("demo").innerHTML = d.getMinutes() + ":" + d.getSeconds();
    timeCounter++;
}, 1000);
</script>

在interval函数之后，分钟会跟着秒数；这很好。但是当计数器改变时，分钟和秒会同时上升，比如“1:01”、“2:02”、“3:03”……

但是当我简单地重复使用getMinutes函数时，该函数正常工作

var d = new Date();
console.log(d.getMinutes());  //12
console.log(d.getMinutes());  //12
console.log(d.getMinutes());  //12

interval 函数更新秒会如何影响分钟的问题？

Answer 1

假设初始时间是 00:00:00。

您将秒设置为 50，它变为 00:00:00。

然后您将秒数设置为 65 并尝试变为 00:00:65，但这是无效的，因此会添加额外的秒数到分钟:00:01:15

现在时间是 00:01:15

如果将秒更改为 30，它将变为 00:01:30。您正在更改当前设置时间的秒数，而不是您第一次创建对象时设置的时间。

所以时间是 00:01:30。

如果您将秒数更改为 65，我们将得到 00:01:65，这是无效的，因此额外的秒数会添加到分钟数中已经存在。 1 + 60/60 = 2 所以你得到:00:02:15

---

如果您想采用这种方法，那么我建议您使用 Moment 库。它有很好的 API 来处理添加时间和克隆对象。

var start = moment();
start.minute(0);
start.second(0);
var timeCounter = 50;

setInterval(function() {
  // Clone the original object so we aren't adding from the previous value
  var now = moment(start);
  now.seconds(timeCounter);
  document.getElementById("demo").innerHTML = now.format("mm:ss");
  timeCounter++;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="demo"></div>

---

但这不是一个好方法。 setInterval 的精度不高，在某些情况下可能会延迟数秒。

最好从时间开始，然后在每次更新显示时计算当时和现在之间的差异。

var start = moment();

setInterval(function() {
  // Clone the original object so we aren't adding from the previous value
  var now = moment();
  var dur = moment.duration(now.diff(start)); 
  
  document.getElementById("demo").innerHTML = dur.minutes() + ":" + dur.seconds();
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="demo"></div>