javascript - 如何在多个div中更新自聊天评论以来的时间

Question

我正在处理聊天消息的相对时间戳，我希望每条聊天消息的写入时间都已过去。

我正在获取这样的消息的示例:

  while($row = $mess->fetch()){
      echo "<div class='chattime'>".$date."</div>";  //$date is 1469994973
  }

它输出这个

<div class='chattime'>1469994973</div>
<div class='chattime'>1469997928</div>
<div class='chattime'>1469998219</div>
<div class='chattime'>1469998430</div>

然后我有这个功能，我想将这个时间戳更新为

2 秒前、5 秒前、2 分钟前，等等，每条消息。每 5 秒它更新多少时间之前。

但它没有更新任何我不知道我做错了什么，这里是我的 javascript

function timeDifference(current, previous) {

    var msPerMinute = 60 * 1000;
    var msPerHour = msPerMinute * 60;
    var msPerDay = msPerHour * 24;
    var msPerMonth = msPerDay * 30;
    var msPerYear = msPerDay * 365;

    var elapsed = current - previous;

    if (elapsed < msPerMinute) {
        return Math.round(elapsed / 1000) + ' seconds ago';
    } else if (elapsed < msPerHour) {
        return Math.round(elapsed / msPerMinute) + ' minutes ago';
    } else if (elapsed < msPerDay) {
        return Math.round(elapsed / msPerHour) + ' hours ago';
    } else if (elapsed < msPerMonth) {
        return 'approximately ' + Math.round(elapsed / msPerDay) + ' days ago';
    } else if (elapsed < msPerYear) {
        return 'approximately ' + Math.round(elapsed / msPerMonth) + ' months ago';
    } else {
        return 'approximately ' + Math.round(elapsed / msPerYear) + ' years ago';
    }
    $('.chattime').text(elapsed);
}
var chattime = $('.chattime').text();
var now = new Date(),
    current = now.getTime() / 1000;

setInterval(function () {
    timeDifference(current, chattime);
}, 5000);

Answer 1

取而代之的是:

<div class='chattime'>1469994973</div>
<div class='chattime'>1469997928</div>
<div class='chattime'>1469998219</div>
<div class='chattime'>1469998430</div>

这样做是为了不丢失初始值:

<div class='chattime' data-initial-value="1469994973"></div>
<div class='chattime' data-initial-value="1469997928"></div>
<div class='chattime' data-initial-value="1469998219"></div>
<div class='chattime' data-initial-value="1469998430"></div>

像这样改变这个函数:

function timeDifference(current, previous) {

    var msPerMinute = 60 * 1000;
    var msPerHour = msPerMinute * 60;
    var msPerDay = msPerHour * 24;
    var msPerMonth = msPerDay * 30;
    var msPerYear = msPerDay * 365;

    var elapsed = current - previous;

    if (elapsed < msPerMinute) {
        return Math.round(elapsed / 1000) + ' seconds ago';
    } else if (elapsed < msPerHour) {
        return Math.round(elapsed / msPerMinute) + ' minutes ago';
    } else if (elapsed < msPerDay) {
        return Math.round(elapsed / msPerHour) + ' hours ago';
    } else if (elapsed < msPerMonth) {
        return 'approximately ' + Math.round(elapsed / msPerDay) + ' days ago';
    } else if (elapsed < msPerYear) {
        return 'approximately ' + Math.round(elapsed / msPerMonth) + ' months ago';
    } else {
        return 'approximately ' + Math.round(elapsed / msPerYear) + ' years ago';
    }
}

然后执行此操作以更新 div 值:

setInterval(function() {
    $('.chattime').each(function() {
        $(this).text(timeDifference(Date.now(), $(this).data('initial-value') * 1000));
    });
}, 5000);

请注意，我正在使用 $(selector).each() 遍历 div。这是相关文档:http://api.jquery.com/each/

这里有一个 fiddle 来展示它的工作原理:

https://jsfiddle.net/pnaozpza/