How Can I Add The Ticking Clock To My Div In An Existing Code?

It's actually a follow up to this question I want to display elements from json based on their time and duration and interval is interupted by settimeout - I accepted the answer th

Solution 1:

One thing that jumps out here:

timestamp += 1000;

setTimeout/setInterval aren't guaranteed to run at precisely the delay you've entered. Run this in your browsers console:

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

On my Mac at home (Chrome/FireFox) it was anywhere from 990 to 1015. Windows machine at work is a bit better (995-1002), but IE was getting up to 1020. It's not a huge difference, but it's not nothing.

So code needs to be able to handle not running exactly every 1000ms. That's why I was running the timer at 500ms intervals, and checking if the start time was less-than-equal to the current time.

I've rejigged the demo to show the time and message in sync:

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

  functioncheck() {
    showMessage(currentMessage());
    showTime();
  }

  functioncurrentMessage() {
    var message = null;
    if (messages.length) {
      var now = toTheSecond(newDate());
      var start = toTheSecond(newDate(messages[0].start_time));
      var end = toTheSecond(newDate(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;
  }

  functiontoTheSecond(date) {
    date.setMilliseconds(0);
    return date;
  }

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

  functionshowTime() {
    time.textContent = newDate().toLocaleString()
  }

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

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

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

(Putting the code here as well because I recall SO want code in the answers so it's controlled, but there's a demo here: http://jsfiddle.net/nauzilus/ymp0615g/).

This probably isn't as efficient as it could be; the message text is being set every iteration which might cause repaints/reflow. But then again setting the time stamp is going to do that anyway, so meh :)