javascript - 如何在现有代码中将滴答时钟添加到我的 div 中？

Question

这实际上是这个问题的后续I want to display elements from json based on their time and duration and interval is interupted by settimeout - 我接受了 @Daniel Flint 的答案 - 他的代码非常清晰，可以在这里找到 http://jsfiddle.net/nauzilus/rqctam5r/

但是，我还想添加一件事 - 一个简单的 div <div id="time"></div>它将包含一个在打开页面期间初始化的新日期时间对象，然后每秒递增一次以不断显示当前时间。我想过在那里写一个javascript:

var actualTime = new Date(substractedDate); // taken from the server

function updateTimeBasedOnServer(timestamp) { 
    var calculatedTime = moment(timestamp);
    var dateString = calculatedTime.format('h:mm:ss A');
    $('#time').html(dateString + ", ");
    };

var timestamp = actualTime.getTime();

updateTimeBasedOnServer(timestamp);
    setInterval(function () {
        timestamp += 1000; // Increment the timestamp at every call.
        updateTimeBasedOnServer(timestamp);
        }, 1000);

(我在那里提供服务器时间作为时间戳)。

我刚刚注意到 div 中显示的时间与屏幕上显示的文本之间存在轻微的不匹配，可能是因为我在两个不同的位置增加了这两个值。

所以我的问题是 - 如何将 @Daniel Flint 的代码与我的代码“合并”并仅在一处增加两个值？

Answer 1

这里跳出一件事:

timestamp += 1000;

setTimeout/setInterval 不保证严格按照您输入的延迟时间运行。在浏览器控制台中运行此命令:

var last = Date.now(),
    time = function() {
      var now = Date.now();
      console.log(now - last);
      last = now;
    },
    id = setInterval(time, 1000);

在我家里的 Mac(Chrome/FireFox)上，它的值在 990 到 1015 之间。工作中的 Windows 机器好一点(995-1002)，但 IE 高达 1020。这并不是一个巨大的差异，但是这并不是什么。

因此代码需要能够处理不完全每 1000 毫秒运行一次的情况。这就是为什么我以 500 毫秒的间隔运行计时器，并检查开始时间是否小于当前时间。

我重新调整了演示，以同步显示时间和消息:

(function() {
  var messages = [];
  var time = document.getElementById("current-time");
  var display = document.getElementById("message");

  function check() {
    showMessage(currentMessage());
    showTime();
  }

  function currentMessage() {
    var message = null;
    if (messages.length) {
      var now = toTheSecond(new Date());
      var start = toTheSecond(new Date(messages[0].start_time));
      var end = toTheSecond(new Date(start.getTime() + ( messages[0].text_duration * 1000 )));

      if (start <= now) {
        if (end <= now) {
          // done with the current message...
          messages = messages.slice(1);
          // ...but check if there's another one ready to go right now
          message = currentMessage();
        }
        else {
          message = messages[0];
        }
      }
    }
    return message;
  }

  function toTheSecond(date) {
    date.setMilliseconds(0);
    return date;
  }

  function showMessage(message) {
    if (message) {
      display.textContent = message.text_content;
    }
    else {
      display.textContent = "no messages";
    }
  }

  function showTime() {
    time.textContent = new Date().toLocaleString()
  }

  function getMessages() {
    setTimeout(function() {
      var now = new Date();
      messages.push(
        {"text_content":"aaaaa","text_duration":5,"start_time": new Date(now.getTime() + 3000).toISOString()},
        {"text_content":"aawwaaaaa","text_duration":5,"start_time": new Date(now.getTime() + 10000).toISOString()},
        {"text_content":"bbaawwaaaaa","text_duration":5,"start_time": new Date(now.getTime() + 15000).toISOString()}
      );
    }, 1000);
  }

  setInterval(check, 500);
  getMessages();
})();

<span id="current-time"></span> <span id="message">Hello there!</span>

(将代码也放在这里，因为我记得所以希望在答案中包含代码，以便对其进行控制，但这里有一个演示: http://jsfiddle.net/nauzilus/ymp0615g/ )。

这可能没有达到应有的效率；每次迭代都会设置消息文本，这可能会导致重绘/回流。但话又说回来，设置时间戳无论如何都会做到这一点，所以嗯:)