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/）。

这可能没有那么高效;每次迭代都会设置消息文本，这可能会导致重绘/重排。但是，无论如何再次设置时间戳将会这样做，所以meh：）

如何在现有代码中为我的div添加滴答时钟？

1 个答案: