jQuery / JavaScript:为什么这会冻结?

时间:2010-08-31 08:35:54

标签: javascript jquery string truncate

我正在尝试实现一个要求,我需要为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>

是什么给出了?

5 个答案:

答案 0 :(得分:1)

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;");

顺便说一句,我觉得有必要为你的代码添加几个指针:

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

答案 1 :(得分:1)

我认为你的截断功能不起作用。

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

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

答案 2 :(得分:1)

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 :(得分:0)

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

答案 4 :(得分:0)

我认为你以错误的方式使用行高。该属性仅为您提供段落中每一行的高度,它用于测量两行之间的空间,而不是计算段落中的行数。

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

P.S。 注意:truncateLineCount也会删除html(char by char),而不仅仅是text。