Question

我们将基于实时数据开发HTML5 + CSS + JavaScript Web应用程序。

数据记录在.csv文件中，我们通过使用setInterval()来触发AJAX调用来检索最新记录。目前，该项目是在Apache服务器上实现的，不使用任何数据库。当我们尝试通过CSS / SVG / JavaScript基于这种数据绘制一些动画图时，动画通常会因数据更新而中断，并且转换不顺畅。

例如，我们尝试使用JavaScript库SiriWave在首页上绘制曲线，并在setInterval()函数更新数据时中断wave。有没有办法在不使用计时器刷新的情况下平滑地更新曲线？我的代码在这里：

function getData(limit, callback) {
    var data = setInterval(function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "../data/data.csv?t="+new Date().getTime(),
            'success': function (data) {
                json = data;
            }
        });
        var count = json.replace(/[^\n]/g, '').length;
        var i = count - 1;
        var lines = json.split("\n");
        var items = lines[i].split(",");
        callback(items);
    }, limit);
}

getData(1000, function (items){
    //Used to remove the last scene
    document.getElementById("wave").innerHTML = '';
    //Start to draw the waving curve
    var siriWave = new SiriWave({
        container: document.getElementById('wave'),
        width: 1920,
        height: 400,
        speed: items[1],
        frequency: items[2],
        autostart: true
    });
});

此处的示例数据（采用csv格式）：

2016-07-20, 100, 20
2016-07-21, 120, 40
2016-07-22, 140, 60

问题是曲线突然从当前状态变为下一个更新状态。有没有人有关于如何解决动画问题的想法？欢迎使用后端和前端解决方案。非常感谢。

Answer 1

您可以使用套接字替换计时器。根据您的服务器端技术，有很多方法可以做到这一点。我特别推荐使用NodeJS，它可以很好地管理很多这样的实时问题。

如何根据实时数据平滑地为前端表示设置动画？

1 个答案: