Проблема с отображением даты в реальном времени (JavaScript / JQuery) - PullRequest
2 голосов
/ 07 января 2020

Чтобы создать чат в режиме реального времени с веб-сокетом, я хотел бы отобразить время сообщения, отправленного таким образом: "% 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);
    }

Эта функция refre sh мой класс ".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;
    }

Эта функция преобразует время в строку для отображения "se c, min, hour, et c."

Однако, когда я отправляю первое сообщение, все работает отлично. Когда я отправляю второе сообщение, время даже больше не появляется.

РЕДАКТИРОВАТЬ:

Теперь, когда приятный человек успешно отладил мою первую проблему, у меня есть другая проблема , Когда я отправляю сообщение, время обновляется хорошо, но учитывает время первого сообщения. Например:

Первое сообщение отправлено 1 минута a go

Второе сообщение автоматически займет время первого сообщения .

Вот код HTML, который я использую для отображения времени:

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

Если бы благотворительная душа могла просветить меня по этой проблеме, я был бы рад.

Хорошего дня !

1 Ответ

1 голос
/ 07 января 2020

Ваша проблема в том, что вы создаете только одну временную метку для всех ваших выходных данных - я бы добавил временную метку к элементу (как атрибут - 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...