1

我在 UI 中实现了一个字符计数器，所以用户可以看到还有多少字符可供输入。

计数，我使用这个简单的功能：

function typerCount(source, layerID)
{
    outPanel = GetElementByID(layerID);
    outPanel.innerHTML = source.value.length.toString();
}
  • source 包含我们要测量的值的字段
  • layerID 包含我们要将结果放入的对象的元素 ID（跨度或 div）
  • outPanel 只是一个临时变量

如果我激活这个功能，在打字的时候机器真的变慢了，我可以看到 FF 正在以 100% 的速度使用一个核心。你不能流利地写，因为它挂在每个几个字母块之后。

问题似乎是第二行中的 value.length() 函数调用？

问候

4

4 回答 4

1

我无法告诉您为什么这么慢，您的示例中没有足够的代码来确定这一点。如果要计算文本区域中的字符并将输入限制为 n 个字符，请检查此 jsfiddle。它的速度足够快，可以毫无障碍地打字。

于 2011-06-10T16:31:29.530 回答
0

正如评论中提到的 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 中甚至调用都非常快。

还有，什么是“ source”？是DOMElement吗？或者是别的什么？

于 2011-06-10T16:25:07.083 回答
0

我怀疑您的问题在于使用 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";
}
于 2011-06-10T16:36:34.597 回答
0

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

另外，这太冗长了：

source.value.length.toString();

这就足够了：

source.value.length;

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

于 2011-06-10T16:33:32.540 回答