Question

在我的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!')
        }
    };
})

如何解决此问题？

谢谢！

Answer 1

通过将source.onmessage中的update（）移出@RobG提及来修复它。

工作代码：

$(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)
})

Momentjs在几秒钟之前交替出现＆＃39;和一分钟前＆＃39;具有动态时间戳

1 个答案: