javascript - 有没有一种优雅的方式来实现时钟更新事件？

Question

据我所知(而且我知道的相对较少)，例如当秒针滴答作响。我想出的最好办法是反复检查 Date 对象(例如，每 333 毫秒；较短的间隔会导致更高的精度，但也会占用更多资源)。不知何故，如果我一遍又一遍地使用相同的 Date 对象，时间将不会更新，而

Date.prototype.getSeconds()

虽然 typeof 是“数字”，但记录“NaN”。

    function clock(interval) {
    var d = new Date();
    var secondsOld = d.getSeconds();
    d = null;

    setInterval(function() {
        var d = new Date();
        var secondsNew = d.getSeconds();
        if ( secondsNew !== secondsOld ) {
            secondsOld = secondsNew;
            // trigger something
            console.log(secondsOld);
        }
        d = null;
    }, interval);
}

Answer 1

你是对的，因为没有本地时钟滴答事件。解决此问题的最高效但最精确的方法是使用 setTimeout() 和 Date.now()。

创建一个每秒调用 setTimeout() 的递归函数。准确地说，使超时持续到该函数调用的下一个精确秒。这是一个例子。

// milliseconds per second
var SECOND = 1000;

function bindClockTick(callback) {
    function tick() {
        var now = Date.now();

        callback(now);

        setTimeout(tick, SECOND - (now % SECOND));
    }

    tick();
}

bindClockTick(function(ms) {
    console.log('tick! milliseconds: '+ ms);
});

这使用 Date.now() 而不是创建 Date 类的新实例。

这是一个 JSFiddle来测试精度。 该演示使用 new Date() 轻松显示当前时间，但只需几毫秒即可完成。