Question

我有一个显示日志文件的最后1000行的网页，然后每隔x秒加载新内容（如果有的话）通过AJAX更新，并附加到带有$('#log').append(new_data)的textarea，排序tail -f。

一段时间后，如果添加太多行并且页面变慢或无响应，问题就会出现。

所以我想限制行数，比如5000，所以这意味着我应该：

检索new_data
计算overflow = 5000 - lines_ in_new_data - lines_in_textarea
如果overflow > 0从textarea删除第一条overflow行
将new_data附加到textarea

在我看来，这涉及split('\n')和textarea值中的一个或多个new_data然后使用数组长度和切片，但我想如果有更简洁或更好的方法来实现这一点。

Answer 1

截断数据后，您应该能够使用单个split然后join，如下所示：

// on data retrieved
var total = ((textarea.value 
              ? textarea.value + "\n" 
              : "") 
          + new_data).split("\n");

if (total.length > 10) 
    total = total.slice(total.length - 10);

textarea.value = total.join("\n");

工作示例：http://jsfiddle.net/ArvQ7/ （为简洁起见减少到10行）

Answer 2

这样的事情（下面链接的演示可能更有用）：

HTML

<button id="clickme">More lines</button>
<br/>
<textarea id="log" rows="24" cols="80"></textarea>
<p>Lines: <span id="numLines">0</span></p>

的JavaScript

var $log = $('#log'),
    $button = $('#clickme'),
    $numLines = $('#numLines'),
    MAX_LINES = 5000,
    lorem_ipsum = ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    lineCounter = 0;

$button.click(function()
{
    $log.val($log.val() + generateMoreLines()).change();
});

$log.change(function ()
{
    var text = tail(MAX_LINES, $log.val());
    $log.val(text);
    $numLines.text(countNewlines(text));
});

function generateMoreLines()
{
    var buf = [];
    for (var i = 0; i < 1000; i++)
    {
        buf.push(lineCounter++ + lorem_ipsum);
    }
    return buf.join('\n');
}

function countNewlines(haystack)
{
    return count('\n', haystack);
}

function count(needle, haystack)
{
    var num = 0,
        len = haystack.length;
    for (var i=0; i < len; i++)
    {
        if (haystack.charAt(i) === needle)
        {
             num++;
        }
    }
    return num;
}

function tail(limit, haystack)
{
    var lines = countNewlines(haystack) + 1;
    if (lines > limit)
    {
        return haystack
            .split('\n')
            .slice(-limit)
            .join('\n');
    }
    return haystack;
}

新行处理并不完美（您是否计算'\n'的所有出现次数？如果字符串以'\n'开头或结尾怎么办？）。

演示：http://jsfiddle.net/mattball/3ghjm/

从textarea删除顶行的最新（和快速）方法

2 个答案:

HTML

的JavaScript