jQuery/JavaScript：为什么会冻结？_Javascript_Jquery_String_Truncate

jQuery/JavaScript：为什么会冻结？

javascript jquery string

jQuery/JavaScript：为什么会冻结？,javascript,jquery,string,truncate,Javascript,Jquery,String,Truncate,我试图实现一个要求，要求我为div元素的内容设置一个最大行长度。但是，当我在Firefox中打开页面时，我得到一个关于“长时间运行脚本”的错误，并被要求继续、调试或停止脚本。我不明白为什么会这样。这是我的代码： <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

我试图实现一个要求，要求我为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>


$.fn.lineCount=函数（）{
var lineHeight=this.css（“line height”）；//返回“Xpx”
return document.getElementById（this.attr（“id”））.offsetHeight/parseInt（lineHeight.substr（0，lineHeight.length-2））；
};
$.fn.truncateRecord=函数（CountAfterRunning）{
while（this.lineCount（）>countAfterRunning）{
var text=this.html（）；
this.html（text.substr（0，text.length-1）+“&hellip；”；
}
};
$（函数（）{
元("标题),删节帐目(3);；
});
我的MVC应用程序

牛排

是

令人惊叹的

给了你什么？

在你的$.fn中，你使用这个而不是jQuery$（这个）。。这可能会在while（）语句中造成无限循环。

在$.fn中，您使用This而不是jQuery$（This）。。这可能会在while（）语句中造成无限循环。

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

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

附言。

小心：truncateLineCount还会删除html（逐字符），而不仅仅是文本。

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

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

附言。小心：truncateLineCount还会删除html（逐字符），而不仅仅是文本。

行高CSS属性的默认值是正常值。这一行：

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

实际上返回的是

“normal”

，然后代码尝试将其解析为整数，从而生成

NaN

除此之外，正如其他人所提到的，您的循环删除了1个字符，并添加了另外8个字符，因此它永远不会变短。您应该附加

&hellip循环结束且您的线路足够短后：
            while (this.lineCount() > countAfterTruncation) {
                this.html(this.html().slice(0, -1));
            }
            this.html(this.html()+"&hellip;");

另外，我觉得有必要为您的代码添加一些指针：

正如我在评论中提到的，当用parseInt（）解析像“12px”这样的字符串时，不需要剪掉px
不要在循环中使用var关键字，这会在每次迭代中重新初始化变量，这除了是错误的做法外，还会在ECMAScript 5的严格模式中抛出错误
可以将slice（）方法与第二个参数的负偏移量一起使用，而不是使用substring（）并传递字符串长度-1
您可以使用this.get（0）
，而不是document.getElementById（this.attr（“id”）
。这已经是jQuery包装的元素，您可以使用get（）方法访问底层元素
如果可以，请不要在循环内操作html（）/innerHTML。性能非常差，因为它在循环的每次迭代中都调用HTML解析器
行高CSS属性的默认值是正常值。这一行：
var lineHeight = this.css("line-height"); // returns "Xpx"

实际上返回的是“normal”
，然后代码尝试将其解析为整数，从而生成NaN


除此之外，正如其他人所提到的，您的循环删除了1个字符，并添加了另外8个字符，因此它永远不会变短。您应该附加&hellip循环结束且您的线路足够短后：
            while (this.lineCount() > countAfterTruncation) {
                this.html(this.html().slice(0, -1));
            }
            this.html(this.html()+"&hellip;");

另外，我觉得有必要为您的代码添加一些指针：

正如我在评论中提到的，当用parseInt（）解析像“12px”这样的字符串时，不需要剪掉px
不要在循环中使用var关键字，这会在每次迭代中重新初始化变量，这除了是错误的做法外，还会在ECMAScript 5的严格模式中抛出错误
可以将slice（）方法与第二个参数的负偏移量一起使用，而不是使用substring（）并传递字符串长度-1
您可以使用this.get（0）
，而不是document.getElementById（this.attr（“id”）
。这已经是jQuery包装的元素，您可以使用get（）方法访问底层元素
如果可以，请不要在循环内操作html（）/innerHTML。性能非常差，因为它在循环的每次迭代中都调用HTML解析器
我认为您的截断函数不起作用
在while循环的每次迭代中，您将删除1个字符，但又添加8个字符（“&hellip；”
）
您可能希望在循环之后添加省略号。
我认为您的truncate函数不起作用
this.html(text.substr(0, text.length - 1) + "&hellip;");

在while循环的每次迭代中，您将删除1个字符，但又添加8个字符（“&hellip；”
）
您可能希望在循环后添加省略号
this.html(text.substr(0, text.length - 1) + "&hellip;");

这一行增加了字符数。它删除最后一个字符，但添加“&hellip；”
到队伍的尽头。因此，文本永远不会被截断
如果您的文本是“我的MVC应用程序”，经过一段时间的while循环后，它会变成：
我的MVC应用程序………..

您的循环应该是：
while (this.lineCount() > countAfterTruncation) {
    var text = this.html();
    this.html(text.substr(0, text.length - 1));
}
this.html(this.html()+"&hellip;");

这一行增加了字符数。