Momentjs 在“几秒钟前”和“一分钟前”之间交替使用动态时间戳答案

【问题标题】：Momentjs alternates between 'a few seconds ago' and 'a minute ago' with a dynamic timestampMomentjs 在“几秒钟前”和“一分钟前”之间交替使用动态时间戳
【发布时间】：2014-09-03 20:39:19
【问题描述】：

在我的 Web 应用程序中，我有一个状态页面，它每隔几秒从服务器发送的事件中获取数据。在该数据中有一个 UTC 时间戳，我使用 moment.js fromNow() 对其进行格式化，所以我知道数据是多久前被提取的。在我尝试使用 setInterval() 动态更新时间戳之前，它工作正常。

当我切换到另一个选项卡大约一分钟并且时间戳从“几秒钟前”转换为“一分钟前”或更长时间时，就会出现此问题。问题是，当我返回原始选项卡时，时间戳会每隔一秒左右在“几秒钟前”和“一分钟前”之间交替。

代码：

$(document).ready(function() {
    var source = new EventSource("{{ url_for('status.stream') }}");
    source.onmessage = function (event) {
        var data = JSON.parse(event.data);
        if (data.hasOwnProperty('errors')) {
            var errors = data.errors;
            console.error(errors)
        } else if (data.hasOwnProperty('result')) {
            var result = data.result;
            $.each(['critical', 'warning', 'unknown'], function(index, key) {
                var label = $('#'+key);
                if (result[key] > 0) {
                    label.text(result[key] + ' ' + key.toUpperCase());
                } else {
                    label.text('')
                }
            });
            if (result.hasOwnProperty('timestamp')) {
                var datetime = $('#datetime');
                var timestamp = result.timestamp;
                var update = function () {
                    var date = moment.utc(timestamp, 'YYYY-MM-DD HH:mm:ss').fromNow();
                    datetime.text(date)
                };
                update();
                setInterval(update, 1000)
            } else {
                console.error('Error getting timestamp!')
            }
        } else {
            console.error('Error getting data from the server!')
        }
    };
})

我该如何解决这个问题？

谢谢！

【问题讨论】：

您可能有多个计时器正在运行，setInterval(update, 1000) 每次调用时都会启动一个新的计时器序列。您只需要一个计时器，然后只需在每次 source.onmessage 运行时更新 timestamp 的值（即从 source.onmessage 中完全删除计时器，如果尚未运行，则可能进行初始化）。
@RobG 的确，这也是我的想法。我已经尝试将 update() 移出，但仍有问题。您的评论让我再次调查，我找到了解决方案。谢谢！

标签： javascript momentjs

【解决方案1】：

如@RobG 所述，通过将 update() 移出 source.onmessage 来修复它。

工作代码：

$(document).ready(function() {
    var source = new EventSource("{{ url_for('status.stream') }}");
    var datetime = $('#datetime');
    var timestamp = null;
    source.onmessage = function (event) {
        var data = JSON.parse(event.data);
        if (data.hasOwnProperty('errors')) {
            var errors = data.errors;
            console.error(errors)
        } else if (data.hasOwnProperty('result')) {
            var result = data.result;
            $.each(['critical', 'warning', 'unknown'], function(index, key) {
                var label = $('#'+key);
                if (result[key] > 0) {
                    label.text(result[key] + ' ' + key.toUpperCase())
                } else {
                    label.text('')
                }
            });
            if (result.hasOwnProperty('timestamp')) {
                timestamp = result.timestamp
            } else {
                console.error('Error getting timestamp!')
            }
        } else {
            console.error('Error getting data from the server!')
        }
    };
    var update = function () {
        if (!timestamp) {
            return false
        } else {
            var date = moment.utc(timestamp, 'YYYY-MM-DD HH:mm:ss').fromNow();
            datetime.text(date)
        }
    };
    update();
    setInterval(update, 1000)
})

【讨论】：