javascript - 仅追加新数据

我正在尝试制作一个日志解析器，该解析器每10秒更新一次日志。它主要是功能性的，但是当我尝试更新它时，它只是再次追加整个日志，而不仅仅是新数据。

我的Javascript：

$(document).ready(function() {

var data;
var lines;

$.ajax({
 async: false,
 type: 'GET',
 url: 'test.log',
 success: function(log) {\
    data = log;
    lines = data.split("\n");
    console.log("Received log");
 }
});

function updateLog()
{
    $.ajax({
     async: false,
     type: 'GET',
     url: 'test.log',
     success: function(log) {
        data = log.replace(data, "");
        lines = log.split("\n");

        console.log("Received log");
        }
    });

    $.each(lines, function(n, elem)
    {
       $('#text').append('<div>' + elem + '</div>');
    });
}



$.each(lines, function(n, elem)
{
   $('#text').append('<div>' + elem + '</div>');
});


   setInterval(function(){updateLog();}, 10000);
});

示例test.log内容：

Hello
How are you?

但是，它不是复制仅添加潜在的新行，而是复制了整个内容，即使我认为由于replace也不应该发生这种情况，应该使用旧的data并将其更改为新数据（仅保留新行）。

最佳答案

在我看来，您仅将上次请求的新部分保存到data，因此实际上您仅用空字符串替换了上次更新日志时新的日志部分。此外，您不是使用data而是使用log（这是完整的日志）来计算lines，并将lines中的所有行附加到div。

我认为这样的事情应该起作用：

$(document).ready(function() {
    var processed_data = '';
    function updateLog() {
        $.ajax({
            async: false,
            type: 'GET',
            url: 'test.log',
            success: function(log) {
                var new_data = log.replace(processed_data, '');
                processed_data = log;
                console.log("Received log");
                var lines = new_data.split('\n');
                $.each(lines, function(n, elem) {
                   $('#text').append('<div>' + elem + '</div>');
                });
            }
        });
    }
    updateLog();
    setInterval(function(){updateLog();}, 10000);
});

请注意，我还通过仅在加载时调用updateLog()而不是复制其内容来摆脱了示例中的某些代码重复。

仅跟踪日志中已打印部分的长度也可能会更有效。像这样：

$(document).ready(function() {
    var processed_data_length = 0;
    function updateLog() {
        $.ajax({
            async: false,
            type: 'GET',
            url: 'test.log',
            success: function(log) {
                var new_data = log.substring(processed_data_length, log.length);
                processed_data_length = log.length;
                console.log("Received log");

                $.each(lines, function(n, elem) {
                   $('#text').append('<div>' + elem + '</div>');
                });
            }
        });
    }
    updateLog();
    setInterval(function(){updateLog();}, 10000);
});