jQuery/JavaScript：为什么会冻结？答案

【问题标题】：jQuery/JavaScript: Why does this freeze?jQuery/JavaScript：为什么会冻结？
【发布时间】：2010-08-31 08:35:54
【问题描述】：

我正在尝试实现一个要求，该要求要求我为 div 元素的内容设置最大行长。但是当我在 Firefox 中打开页面时，我收到关于“长时间运行的脚本”的错误，并被要求继续、调试或停止脚本。我不明白为什么会这样。这是我的代码：

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $.fn.lineCount = function () {
                var lineHeight = this.css("line-height"); // returns "Xpx"
                return document.getElementById(this.attr("id")).offsetHeight / parseInt(lineHeight.substr(0, lineHeight.length - 2));
            };

            $.fn.truncateLineCount = function (countAfterTruncation) {
                while (this.lineCount() > countAfterTruncation) {
                    var text = this.html();
                    this.html(text.substr(0, text.length - 1) + "&hellip;");
                }
            };

            $(function () {
                $("#title").truncateLineCount(3);
            });
        </script>
    </head>

<body>
 <div id="title">
  My MVC Application<br />
  steaks<br />
  are<br />
  awesome
 </div>
</body>
</html>

什么给了？

【问题讨论】：

我认为您的 truncateLineCount 函数不会改变行数。
不是手头的问题，但值得一提：parseInt() 接受它的字符串参数并在开始时查找一个整数，没有必要对“px”进行切片“结束。例如，parseInt("12px") 将返回 12。

标签： javascript jquery string truncate

【解决方案1】：

我认为你的 truncate 函数不起作用。

在您的 while 循环的每次迭代中，您将删除 1 个字符但又添加了 8 个字符 ("&hellip;")。

您可能希望在循环之后添加省略号。

【讨论】：

【解决方案2】：

this.html(text.substr(0, text.length - 1) + "&hellip;");

这一行增加了字符数。它删除了最后一个字符，但添加了"&hellip;" 到行尾。所以文本永远不会被截断。

如果你的文本是My MVC Application，经过一段时间的循环，它变成： My MVC Applicatio................

你的循环应该是：

while (this.lineCount() > countAfterTruncation) {
    var text = this.html();
    this.html(text.substr(0, text.length - 1));
}
this.html(this.html()+"&hellip;");

【讨论】：

【解决方案3】：

line-height CSS 属性的默认值为 normal。这一行：

var lineHeight = this.css("line-height"); // returns "Xpx"

实际上返回"normal"，然后您的代码会尝试将其解析为整数，从而产生NaN。

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

除此之外，正如其他人所提到的，您的循环删除了 1 个字符并添加了另外 8 个字符，因此它永远不会变得更短。你应该在循环结束并且你的行足够短之后附加&hellip;：

            while (this.lineCount() > countAfterTruncation) {
                this.html(this.html().slice(0, -1));
            }
            this.html(this.html()+"&hellip;");

顺便说一句，我觉得有必要为您的代码添加一些指针：

正如我在 cmets 中提到的，在使用 parseInt() 解析像“12px”这样的字符串时，您不需要剪掉 px。
不要在循环中使用 var 关键字，这会在每次迭代时重新初始化变量，这不仅是不好的做法，还会在 ECMAScript 5th 的严格模式下引发错误。
您可以将 slice() 方法与第二个参数的负偏移量一起使用，而不是使用 substring() 并传递字符串长度 - 1。
您可以使用this.get(0)，而不是document.getElementById(this.attr("id"))。 this 已经是 jQuery 封装的元素，你可以使用 get() 方法访问底层元素。
如果您能提供帮助，请不要在循环内操作 html()/innerHTML。性能非常差，因为它在循环的每次迭代中调用 HTML 解析器。

【讨论】：

【解决方案4】：

在您的 $.fn 中，您使用 this 而不是 jQuery $(this).. 这可能会导致您的 while () 语句中出现无限循环。

【讨论】：

不，在 jQuery 插件 ($.fn....) 中，这是 jQuery 对象，所以不需要 $(this)

【解决方案5】：

我认为您以错误的方式使用 line-height。该属性只为您提供段落中每一行的高度，它用于测量两行之间的空间，而不是计算段落中有多少行。

您从 truncateLineCount() 中的内容中删除文本，但 lineCount 始终具有相同的值，因此 while 循环永远不会结束...

附：注意：truncateLineCount 还会删除 html（逐个字符），而不仅仅是文本。

【讨论】：