Javascript 如何基于实时数据平滑地设置前端表示的动画？

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

数据记录在一个.csv文件中，我们通过使用setInterval触发AJAX调用来检索最新的记录。目前，该项目在Apache服务器上实现，不使用任何数据库。当我们试图通过CSS/SVG/JavaScript绘制基于此类数据的动画图时，动画通常会被数据更新中断，并且转换不平稳

例如，我们尝试使用JavaScript库在首页上绘制一条曲线，当数据被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

---

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

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

这个问题要么过于宽泛，基于观点，要么需要讨论，因此不适合堆栈溢出。如果您有一个具体的、可回答的编程问题，请提供完整的细节。这是模糊的。想象一下，一位同事来找你，说我的动画不行。你会怎么做？可能要求查看实际代码：我怀疑您需要创建一个包含少量模拟数据的应用程序，而不必加载ajax，这样我们就可以看到您在做什么。这似乎更像是SiriWave的问题，而不是其他任何问题。虽然我不熟悉，但从他们的API来看，他们有一个setSpeed和setFrequency选项。如果实现得很好，使用他们的更新方法，而不是简单地把它吹走，每次都创建一个新的更新方法就可以了。