Problem displaying datetime in real time (JavaScript/JQuery)

Question

In order to develop a chat in real time with websocket, I would like to display the time of a message posted in this way: "% sec/min/hour/day now" .

For this fact, after some research, I found two functions which I modified :

    // 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);
    }

This function refresh my ".timeStamp" Class to automatically update the message time.

        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;
    }

This function transforms time into a string to display "sec, min, hour, etc."

However, when I send the first message, everything works perfectly fine. When I send the second message the time does not even appear anymore.

EDIT :

Now that a nice person has successfully debugged my first problem, I have another problem. When I send a message the time updates well but takes into account the time of the first message. For example :

First message sent 1 minute ago

Second message will automatically take the time of the first message .

Here is the HTML code I use to display the time :

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

If a charitable soul could enlighten me on this problem I would be delighted.

Have a good day !

Answer 1

Your problem is that you only create one timestamp for all your outputs - i would add the timestamp to the element (as an attribute - data-timestamp as example) and calculate it with this value for each element.

Here's an example:

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