javascript - 如何根据实时数据平滑地动画前端表示？

Question

我们将开发一个基于实时数据的 HTML5+CSS+JavaScript 网络应用程序。

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

例如，我们尝试使用 JavaScript 库 SiriWave通过setInterval()函数在首页绘制一条曲线，当数据更新时波浪被打断。有什么方法可以不使用定时器刷新来平滑更新曲线吗？我的代码在这里:

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，它可以很好地处理许多这样的实时问题。