Question

我在UI中实现了一个charcounter，因此用户可以看到剩下多少个字符用于输入。

为了统计，我使用这个简单的功能：

function typerCount(source, layerID)
{
    outPanel = GetElementByID(layerID);
    outPanel.innerHTML = source.value.length.toString();
}

source包含我们想要测量的值
layerID包含我们要将结果放入的对象的元素ID（span或div）
outPanel只是一个临时var

如果我激活此功能，在键入机器时确实变慢了，我可以看到FF正在使用100％的一个核心。你不能写得很流利，因为它在每个几个字母后都会挂起。

问题似乎可能是第二行中的value.length（）函数调用？

此致

Answer 1

我无法告诉你为什么它很慢，你的例子中没有足够的代码来确定它。如果要计算textarea中的字符数并将输入限制为n个字符，请选中this jsfiddle。它足够快，无障碍地打字。

Answer 2

如评论中提到的artyom.stv，请缓存GetElementByID来电的结果。另外，作为旁注，GetElementByID在做什么？除了致电document.getElementById之外，它还在做其他事吗？

你会如何缓存这个？

var outPanelsById = {};

function getOutPanelById(id) {
    var panel = outPanelsById[id];

    if (!panel) {
         panel = document.getElementById(id);
         outPanelsById[id] = panel;
    }

    return panel;
};

function typerCount(source, layerId) {
    var panel = getOutPanelById(layerId);
    panel.innerHTML = source.value.length.toString();
};

我认为必须有其他事情发生，因为甚至getElementById调用在FF中都非常快。

另外，＆＃34; source＆＃34;？是DOMElement吗？或者是别的什么？

Answer 3

它可能与outPanel有问题。每次调用该函数时，它都会查找该DOM节点。如果你的目标是同一个DOM节点，那么如果你每次键入一个字符都这样做，这对浏览器来说是非常昂贵的。

另外，这太冗长了：

source.value.length.toString();

这就足够了：

source.value.length;

JavaScript是动态的。它不需要转换为字符串。

Answer 4

我怀疑你的问题是使用innerHTML还是getElementById（）。

我会尝试通过删除部分函数并查看cpu的使用方式来解决问题。例如，尝试所有这些方式：

var len;

function typerCount(source, layerID)
{
    len = source.value.length;
}

function typerCount(source, layerID)
{
    len = source.value.length.toString();
}

function typerCount(source, layerID)
{
    outPanel = GetElementByID(layerID);
    outPanel.innerHTML = "test";
}

JavaScript＆amp;字符串长度：为什么这个简单的函数像地狱一样慢？

4 个答案: