Question

所以我已经有了这个JavaScript时钟，我希望它与客户完全同步。系统时钟。我知道如何使用Date对象获取当前时间，并且我知道如何每60000毫秒（1分钟）运行更新功能。问题是客户端可能在半分钟已经过去时加载页面，使时钟滞后30秒。当分钟变量实际发生变化时，有没有办法只运行更新功能？（我只想要精确度。）

我如何获得当前时间：

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();

我如何每隔60000毫秒运行一次更新功能：

setInterval(update,60000); //"update" is the function that is run

Answer 1

当用户登录时，获取当前时间和分钟，减去60以获得剩余秒数，然后相乘以设置计时器

var time = new Date(),
    secondsRemaining = (60 - time.getSeconds()) * 1000;

setTimeout(function() {
    setInterval(update, 60000);
}, secondsRemaining);

Answer 2

首先，您必须了解javascript中的计时器不能保证按时调用，因此您无法在任何时候完全同步 - javascript只是不是那样的实时语言。它是单线程的，因此定时器事件必须等待在执行定时器之前可能正在执行的其他javascript。所以，你必须有一个尽可能保持尽可能好的设计，即使定时器被延迟（比它应该更晚调用）。

如果您想尝试保持接近对齐状态并进行最少的屏幕更新并且对移动电池的使用寿命最友好，我建议使用这种自动对齐代码，根据剩余时间在每个滴答上重新调整直到下一分钟改变：

function runClock() {
    var now = new Date();
    var timeToNextTick = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
    setTimeout(function() {
        update();
        runClock();
    }, timeToNextTick);
}

// display the initial clock
update();
// start the running clock display that will update right on the minute change
runClock();

这样做的好处是它只在下一分钟的边界上调用一次更新。

工作演示：http://jsfiddle.net/jfriend00/u7Hc5/

Answer 3

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();
var currentSecond   =   time.getSeconds();

var updateinterval = setInterval(startTimer,(60-currentSecond)*1000);

function startTimer(){
    clearInterval(updateinterval);
    setInterval(update,60000);
}

function update(){
    var time = new Date();
    console.log(time.getSeconds());
}

Answer 4

我会设置一个间隔来运行每秒，然后检查time.getSeconds（）== 0.这样，您可以根据客户端时间在新分钟开始时执行操作。

每隔一分钟运行JS功能

4 个答案: