从文本区域中删除顶行的最简洁（也是快速）的方法

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 附加到文本区域

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

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/