在div元素中更新Momentjs FromNow（）

Question

我有這個div元素，它顯示自創建以來的時間。 但是它沒有更新，總是在幾秒鍾前保留。 看起來像這樣

var newMsg= "<div id="chat-time">'+ moment().fromNow()+'</div>";
 $("#chat-list").html( newMsg);

如何更新此文字。 我知道我可以使用sendInterval做到這一點，但我不知道如何正確地做到這一點，它只打印幾秒鍾！ 我正在將此用於聊天室。 因此，每條消息都會有一個時間戳，格式為momentjs.fromNow（）。 為所有這些消息設置計時器是否會產生問題？ 我會很高興的提示。

編輯 ：我正在使用下面提到的此代碼，但未顯示任何內容：

<div id="chat-time"></div>

var messageTimeStamp = new Date();
setInterval(function(){
    var time = moment(messageTimeStamp).fromNow();

    $("#chat-time").html(time);
}, 1000);

Answer 1

更新2

假設您使用的是socket.io，則可以執行以下操作（演示： http : //plnkr.co/edit/QuaMV6x1vNB0kYPaU6i1?p=preview ）：

  // The messages the user can currently see.
  var messages = [];

  // You have something like this in your code, presumably.
  socket.on('new message', function(data) {
    addChatMessage(data);
  });

  function addChatMessage(data) {
    // First add the message to the dome, with a unique id for the timestamp text.
    var messageElementId = 'chat-message-' + data.messageId;
    $("#chat-list").prepend($("<div>" + data.message + "<i> (sent: <span id='" + messageElementId + "'>just now</span>)</i></div>"));

    // When you no longer display that message in the DOM it from clear this array.  I'd render the DOM based on this list if I were you.
    messages.push({
      messageElementId: messageElementId,
      timestamp: data.timestamp
    });
  }

  // By updating all the messages at once you don't have memory leaks.
  setInterval(function() {
    messages.forEach(function(message) {
      var time = moment(message.timestamp).fromNow();
      $("#" + message.messageElementId).text(time);
    });
  }, 1000);

---

更新1

鑒於這是您的代碼：

var newMsg= "<div id="chat-time">'+ moment().fromNow()+'</div>";
$("#chat-list").html(newMsg);

您可以這樣做，而不是：

var messageTimeStamp = new Date(); // You need to grab this from somewhere.

setInterval(function(){
  var time = moment(messageTimeStamp).fromNow();        
  $("#chat-list").html(time);
}, 1000);

---

您需要使用moment(TIMESTAMP_OF_MESSAGE)而不是moment()並執行以下操作：

$(function(){
  $("body").append($('<div id="chat-time"></div>'));

  var messageTimeStamp = new Date();
  var i = 0;
  setInterval(function(){
    var time = moment(messageTimeStamp).fromNow();

    $("#chat-time").html('moment().from(messageTimeStamp): ' + time + '; setInterval calls made ' + i++);
  }, 1000);
});

這是一個演示。

http://plnkr.co/edit/QuaMV6x1vNB0kYPaU6i1?p=preview

Answer 2

為了使這項工作有效，您需要運行dom中的元素並運行setInterval而不將其包含在任何字符串連接中

的HTML

<div id="chat-time"></div>

JS

var $chatTime = $('#chat-time').text(moment().fromNow());
setInterval(function(){ 
   var time = moment().fromNow();
    $chatTime.txt( time );
}, 1000);

Answer 3

使用setInterval ()我看不到任何問題。 $ interval服務模塊上的AngularJS包裝器setInterval。 查看以下網址： interval Angular和Wrapper SetInterval