Question

所以我为我的网站创建了一个时钟，我想到了两种方法......

1）

var today = new Date();
this.start = function() {
    this.update();
    setInterval(this.update,1000);
}
this.update = function() {
    today.setSeconds(today.getSeconds() + 1);
}

或

2）

var today = new Date();
this.start = function() {
    this.update();
    setInterval(this.update,1000);
}
this.update = function() {
    today = new Date();
}

哪个更好？每秒生成一个新日期还是只更新？（或许是第三种方法）

Answer 1

为每个循环使用new Date()会更好，因为setInterval上使用的时间间隔不会是100％不变。

无论new Date()差异

，

setInterval都是准确的

这是我几天前给出的answer片段。它解释了使用setInterval进行固定值递增（或递减）的问题。

注意创建以固定值递增的计时器

在您的代码中，您有

setTimeout(() => this.count--, 1000);

您打算每秒递减一次count财产，但这不是您将得到保证的行为。

查看这个小脚本

var state = {now: Date.now()};

function delta(now) {
  let delta = now - state.now;
  state.now = now;
  return delta;
}

setInterval(() => console.log(delta(Date.now())), 1000);

// Output
1002
1000
1004
1002
1002
1001
1002
1000

我们使用setInterval(fn, 1000)但实际间隔每次都会变化几毫秒。

如果您执行诸如将浏览器的焦点切换到其他选项卡，打开新标签等操作，则会夸大问题。查看这些更多零星的数字

1005 // close to 1000 ms
1005 // ...
1004 // a little variance here
1004 // ...
1834 // switched focus to previous browser tab
1231 // let timer tab run in background for a couple seconds
1082 // ...
1330 // ...
1240 // ...
2014 // switched back to timer tab
1044 // switched to previous tab
2461 // rapidly switched to many tabs below
1998 // ...
2000 // look at these numbers...
1992 // not even close to the 1000 ms that we set for the interval
2021 // ...
1989 // switched back to this tab
1040 // ...
1003 // numbers appear to stabilize while this tab is in focus
1004 // ...
1005 // ...

因此，这意味着您无法依赖setTimeout（或setInterval）函数每1000 ms运行一次。 count将根据各种因素递减多少变化。

要解决此问题，您需要使用delta。这意味着在每个＆＃34; tick＆＃34;之前对于您的计时器，您需要使用Date.now获取时间戳。在下一个刻度线上，采用新的时间戳并从新时间戳中减去之前的时间戳。那是你的delta。使用此值，将其添加到计时器的总ms中，以获得计时器运行的精确毫秒数。

Javascript - 最好的两种方法来创建一个简单的时钟

1 个答案: