javascript - 只追加新数据

Question

我正在尝试制作一个日志解析器，每 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 并在新数据中将其更改为 ''(仅保留新行)。

Answer 1

在我看来，您只将上次请求的新部分保存到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);
});