javascript - 实时显示日期时间时出现问题(JavaScript/JQuery)

Question

为了使用websocket开发实时聊天，我想以这种方式显示发布消息的时间:“% sec/min/hour/day now”。

对于这个事实，经过一番研究，我发现了两个我修改的函数:

    // Get the TimeStamp
    var msgDate = new Date();

    // Update
    updateTimeStamp();

    min = 3000;
    max = 4000;

    setInterval(updateTimeStamp, Math.floor(Math.random() * max) + min);

    function updateTimeStamp() {
        // Update 
        var timeAgo = time_ago(msgDate);
        $(".timeStamp").html(timeAgo);
    }

此函数刷新我的“.timeStamp”类以自动更新消息时间。

        function time_ago(time) {

        switch (typeof time) {
        case 'number':
            break;
        case 'string':
            time = +new Date(time);
            break;
        case 'object':
            if (time.constructor === Date) time = time.getTime();
            break;
        default:
            time = +new Date();
        }
        var time_formats = [
        [60, 'sec', 1], // 60
        [120, '1 min', '1 min'], // 60*2
        [3600, 'min', 60], // 60*60, 60
        [7200, '1 heure', '1 heure'], // 60*60*2
        [86400, 'heures', 3600], // 60*60*24, 60*60
        [172800, 'Hier', 'Demain'], // 60*60*24*2
        [604800, 'jours', 86400], // 60*60*24*7, 60*60*24
        [1209600, 'Semaine dernière', 'Semaine prochaine'], // 60*60*24*7*4*2
        [2419200, 'semaines', 604800], // 60*60*24*7*4, 60*60*24*7
        [4838400, 'Mois dernier', 'Mois suivant'], // 60*60*24*7*4*2
        [29030400, 'mois', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
        [58060800, 'L\'an dernier', 'Next year'], // 60*60*24*7*4*12*2
        [2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
        [5806080000, 'Last century', 'L\'année prochaine'], // 60*60*24*7*4*12*100*2
        [58060800000, 'Une décennie', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
        ];
        var seconds = (+new Date() - time) / 1000,
        list_choice = 1;

        if (seconds < 0) {
        seconds = Math.abs(seconds);
        list_choice = 2;
        }
        var i = 0,
        format;
        while (format = time_formats[i++])
        if (seconds < format[0]) {
            if (typeof format[2] == 'string')
            return format[list_choice];
            else
            return Math.floor(seconds / format[2]) + ' ' + format[1];
        }
        return time;
    }

该函数将时间转换为字符串以显示“秒、分钟、小时等”

但是，当我发送第一条消息时，一切都工作得很好。当我发送第二条消息时，时间甚至不再出现。

编辑:

现在一个好人已经成功调试了我的第一个问题，我还有另一个问题。当我发送消息时，时间会很好地更新，但会考虑第一条消息的时间。例如:

第一条消息于 1 分钟前发送

第二条消息将自动占用第一条消息的时间。

这是我用来显示时间的 HTML 代码:

<small class="timeStamp text-muted my-auto"></small></li>

如果一个慈善的灵魂能够启发我解决这个问题，我会很高兴。

祝你有美好的一天!

Answer 1

您的问题是，您只为所有输出创建一个时间戳 - 我会将时间戳添加到元素中(作为属性 - data-timestamp 作为示例)并使用该值计算它每个元素。

这是一个例子:

    // Update
    updateTimeStamp();

    min = 3000;
    max = 4000;

    setInterval(updateTimeStamp, Math.floor(Math.random() * max) + min);

    function updateTimeStamp() {
        // Update
        $(".timeStamp").each(function() {
            $(this).text(time_ago(parseInt($(this).data('timestamp')) * 1000));
        }) 
    }



       function time_ago(time) {
        switch (typeof time) {
        case 'number':
            break;
        case 'string':
            time = +new Date(time);
            break;
        case 'object':
            if (time.constructor === Date) time = time.getTime();
            break;
        default:
            time = +new Date();
        }
        var time_formats = [
        [60, 'sec', 1], // 60
        [120, '1 min', '1 min'], // 60*2
        [3600, 'min', 60], // 60*60, 60
        [7200, '1 heure', '1 heure'], // 60*60*2
        [86400, 'heures', 3600], // 60*60*24, 60*60
        [172800, 'Hier', 'Demain'], // 60*60*24*2
        [604800, 'jours', 86400], // 60*60*24*7, 60*60*24
        [1209600, 'Semaine dernière', 'Semaine prochaine'], // 60*60*24*7*4*2
        [2419200, 'semaines', 604800], // 60*60*24*7*4, 60*60*24*7
        [4838400, 'Mois dernier', 'Mois suivant'], // 60*60*24*7*4*2
        [29030400, 'mois', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
        [58060800, 'L\'an dernier', 'Next year'], // 60*60*24*7*4*12*2
        [2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
        [5806080000, 'Last century', 'L\'année prochaine'], // 60*60*24*7*4*12*100*2
        [58060800000, 'Une décennie', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
        ];
        var seconds = (+new Date() - time) / 1000,
        list_choice = 1;

        if (seconds < 0) {
        seconds = Math.abs(seconds);
        list_choice = 2;
        }
        var i = 0,
        format;
        while (format = time_formats[i++])
        if (seconds < format[0]) {
            if (typeof format[2] == 'string')
            return format[list_choice];
            else
            return Math.floor(seconds / format[2]) + ' ' + format[1];
        }
        return time;
    }

.msg {
  margin-bottom: 10px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
    <div class="msg">
        <div class="content">Merry xmas!</div>
        <div class="timeStamp" data-timestamp="1577275200"></div>
    </div>
    <div class="msg">
        <div class="content">Happy new year!</div>
        <div class="timeStamp" data-timestamp="1577880000"></div>
    </div>
    <div class="msg">
        <div class="content">Question on stackoverflow</div>
        <div class="timeStamp" data-timestamp="1578398400"></div>
    </div>