Question

我有一个像这样的javascript程序：

function addtime() {
  curtime = document.getElementById("time").value * 1000;
  curtime += 1;
  document.getElementById("time").value = curtime / 1000;
}
setInterval(function () {
  addtime();
}, 1);

你可能会在我的代码中看到我乘以1000然后除以1000，这是因为我想每次增加一毫秒，但是在“time”输出div中显示秒数。但是当我打开包含此代码的页面时，如果你理解我的意思，那么第二个实际上并不是“第二个”。它目前是正常秒的三倍，我不知道为什么。

那么我的代码中存在什么问题，我该怎么做才能解决它？

由于

卢卡斯

Answer 1

问题在于，JavaScript无法保证在您指定的时间调用setInterval，但是在该时间过后它第一次有机会。此外，在许多（所有？）浏览器的分辨率下，1ms是可以的。

要正确执行此操作，请获取开始时间，然后通过减去当前时间找出经过的毫秒数。

var start = new Date();
var update = function() {
    var now = new Date();
    var elapsed = now - start;
    // now you can do something with `elapsed`,
    // like stuff it into the UI
};
setInterval(update, 100);

Answer 2

这里是a video，其中J. Resig解释了JavaScript如何使用计时器，以及他在测试中使用计时器的介绍。

＆＃34; OSX定时器精确到毫秒级。但在Windows中，计时器仅每15ms更新一次。＆＃34;

N.Zakas在这里another article指出定时器分辨率在某些情况下是不同的，它也取决于浏览器。 1ms的分辨率很快，但它会占用大量的CPU处理，这就是为什么浏览器会将其拉回来的原因。据我所知，当选项卡不在焦点时，浏览器会减少计时器（以及渲染）。

我在Chrome中看到了这一点，特别是在同一页面上同时打开4个标签的慢速PC中，只有焦点首先呈现（顺时针快速图标），而其他人继续加载（逆时针加载图标）。

Answer 3

如果你想要一秒间隔设置间隔为秒，而不是按毫秒增加时间，则增加秒数。然后，您也可以简化您的价值更新代码。

请参阅此处http://jsfiddle.net/NGTXU/

setInterval(function () {
   document.getElementById("time").value++;
},1000);

Answer 4

由于setInterval将参数视为毫秒，我认为您应该将1替换为1000

function addtime() {
  curtime = document.getElementById("time").value * 1000;
  curtime += 1;
  document.getElementById("time").value = curtime / 1000;
}
setInterval(function () {
  addtime();
}, 1000);

为什么第二个长度不正确？

4 个答案: